環(huán)境配置為:
通過(guò)npm install --save three安裝three.js
創(chuàng)建view/div綁定id
<template>
? ? <view id="canvas3d" class="ar_video"></view>
</template>
引入three.js
export default {
? data() {
? ? return {
? ? ? Scene: null,
? ? ? camera: null,
? ? ? width: null,
? ? ? height: null,
? ? ? renderer: null,
? ? ? gltf_path: '',
? ? ? mixer: null
? ? }
? },
? created() {
? ? this.$nextTick(() => {
? ? ? this.getARinfo()
? ? ? this.init()
? ? ? this.initcamera()
? ? ? this.initLight()
? ? ? var clock = new THREE.Clock();
? ? ? let that = this
? ? ? var animate = function () {
? ? ? ? requestAnimationFrame( animate );
? ? ? ? var time = clock.getDelta();
? ? ? ? if (that.mixer) {
? ? ? ? ? that.mixer.update(time);
? ? ? ? }
? ? ? ? that.renderer.render( that.Scene, that.camera );
? ? ? };
? ? ? animate()
? ? })
? },
? methods: {
//網(wǎng)絡(luò)獲取gltf模型
? ? getARinfo() {
? ? ? this.gltf_path = 'https://www.****/';
? ? ? this.initEarth()
? ? },
? ? init() {
? ? ? let that = this
? ? ? that.Scene = new THREE.Scene();
? ? ? that.camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
? ? ? //獲取容器的寬高
? ? ? that.width = window.innerWidth;
? ? ? that.height = window.innerHeight;
? ? ? that.renderer = new THREE.WebGLRenderer({
? ? ? ? antialias: true,//antialias:true/false是否開(kāi)啟反鋸齒
? ? ? ? precision: "highp",//precision:highp/mediump/lowp著色精度選擇
? ? ? ? alpha: true,//alpha:true/false是否可以設(shè)置背景色透明
? ? ? ? premultipliedAlpha: false,//?
? ? ? ? stencil: false,//?
? ? ? ? preserveDrawingBuffer: true,//preserveDrawingBuffer:true/false是否保存繪圖緩沖
? ? ? ? maxLights: 1//maxLights:最大燈光數(shù)
? ? ? });
? ? ? that.renderer.setSize(that.width, that.height );
? ? ? document.getElementById('canvas3d').appendChild(that.renderer.domElement);
? ? ? //設(shè)置canvas背景色(clearColor)和背景色透明度（clearAlpha）
? ? ? that.renderer.setClearColor(0x000000,0.5);
? ? },
? ? initcamera() {
? ? ? let that = this
? ? ? that.camera.position.x=35;
? ? ? that.camera.position.y=35;
? ? ? that.camera.position.z=20;
? ? ? var controls = new OrbitControls(that.camera, that.renderer.domElement);
? ? ? controls.autoRotate = true;
? ? },
? ? initLight() { // 燈光
? ? ? let that = this
? ? ? //環(huán)境光
? ? ? that.Scene.add(new THREE.AmbientLight(0x666666));
? ? ? var light = new THREE.DirectionalLight();
? ? ? //light.position.set(112, 115, 113);
? ? ? //light.intensity = 1;
? ? ? //light.color.setHex( 0xffffff );
? ? ? that.Scene.add(light);
? ? ? //點(diǎn)光源
? ? ? var point = new THREE.PointLight(0x666666);
? ? ? point.position.set(400, 200, 300); //點(diǎn)光源位置
// 通過(guò)add方法插入場(chǎng)景中，不插入的話，渲染的時(shí)候不會(huì)獲取光源的信息進(jìn)行光照計(jì)算
? ? ? that.Scene.add(point); //點(diǎn)光源添加到場(chǎng)景中
// 點(diǎn)光源2? 位置和point關(guān)于原點(diǎn)對(duì)稱
? ? ? var point2 = new THREE.PointLight(0x666666);
? ? ? point2.position.set(-400, -200, -300); //點(diǎn)光源位置
? ? ? that.Scene.add(point2); //點(diǎn)光源添加到場(chǎng)景中
? ? ? var point3 = new THREE.PointLight(0x666666);
? ? ? point3.position.set(400, 200, -300); //點(diǎn)光源位置
? ? ? that.Scene.add(point3); //點(diǎn)光源添加到場(chǎng)景中
? ? ? var point4 = new THREE.PointLight(0x666666);
? ? ? point4.position.set(400, -200, 300); //點(diǎn)光源位置
? ? ? that.Scene.add(point4); //點(diǎn)光源添加到場(chǎng)景中
? ? ? var point5 = new THREE.PointLight(0x666666);
? ? ? point5.position.set(-400, 200, 300); //點(diǎn)光源位置
? ? ? that.Scene.add(point5); //點(diǎn)光源添加到場(chǎng)景中
? ? ? var point6 = new THREE.PointLight(0x666666);
? ? ? point6.position.set(-400, -200, 300); //點(diǎn)光源位置
? ? ? that.Scene.add(point6); //點(diǎn)光源添加到場(chǎng)景中
? ? ? var point7 = new THREE.PointLight(0x666666);
? ? ? point7.position.set(-400, 200, -300); //點(diǎn)光源位置
? ? ? that.Scene.add(point7); //點(diǎn)光源添加到場(chǎng)景中
? ? ? var point8 = new THREE.PointLight(0x666666);
? ? ? point8.position.set(400, -200, -300); //點(diǎn)光源位置
? ? ? that.Scene.add(point8); //點(diǎn)光源添加到場(chǎng)景中
? ? ? var spotLight = new THREE.SpotLight( 0x666666 );
? ? ? spotLight.position.set( 100, 1000, 100 );
? ? ? spotLight.castShadow = true;
? ? ? spotLight.shadow.mapSize.width = 1024;
? ? ? spotLight.shadow.mapSize.height = 1024;
? ? ? spotLight.shadow.camera.near = 500;
? ? ? spotLight.shadow.camera.far = 4000;
? ? ? spotLight.shadow.camera.fov = 30;
? ? ? that.Scene.add( spotLight );
? ? },
? ? initEarth() {
? ? ? let that = this
? ? ? var loder=new GLTFLoader();
? ? ? loder.load(that.gltf_path,function (obj) {
? ? ? ? //需要添加的部分
? ? ? ? obj.scene.traverse( function ( child ) {
? ? ? ? ? if ( child.isMesh ) {
? ? ? ? ? ? child.material.emissive =? child.material.color;
? ? ? ? ? ? child.material.emissiveMap = child.material.map;
? ? ? ? ? }
? ? ? ? } );
? ? ? ? //獲取模型，并添加到場(chǎng)景
? ? ? ? var model=obj.scene;
? ? ? ? that.Scene.add(model);
? ? ? ? //將模型綁定到動(dòng)畫混合器里面
? ? ? ? that.mixer = new THREE.AnimationMixer( model );
? ? ? ? //同時(shí)將這個(gè)外部模型的動(dòng)畫全部綁定到動(dòng)畫混合器里面
? ? ? ? for (var i=0;i<obj.animations.length;i++){
? ? ? ? ? that.mixer.clipAction(obj.animations[i]).play();
? ? ? ? }
? ? ? })
? ? }
? }
}
css
