环境配置为:
通过npm install --save three安装three.js
创建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: {
//网络获取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是否开启反锯齿
precision: "highp",//precision:highp/mediump/lowp着色精度选择
alpha: true,//alpha:true/false是否可以设置背景色透明
premultipliedAlpha: false,//?
stencil: false,//?
preserveDrawingBuffer: true,//preserveDrawingBuffer:true/false是否保存绘图缓冲
maxLights: 1//maxLights:最大灯光数
});
that.renderer.setSize(that.width, that.height );
document.getElementById('canvas3d').appendChild(that.renderer.domElement);
//设置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
//环境光
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);
//点光源
var point = new THREE.PointLight(0x666666);
point.position.set(400, 200, 300); //点光源位置
// 通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算
that.Scene.add(point); //点光源添加到场景中
// 点光源2 位置和point关于原点对称
var point2 = new THREE.PointLight(0x666666);
point2.position.set(-400, -200, -300); //点光源位置
that.Scene.add(point2); //点光源添加到场景中
var point3 = new THREE.PointLight(0x666666);
point3.position.set(400, 200, -300); //点光源位置
that.Scene.add(point3); //点光源添加到场景中
var point4 = new THREE.PointLight(0x666666);
point4.position.set(400, -200, 300); //点光源位置
that.Scene.add(point4); //点光源添加到场景中
var point5 = new THREE.PointLight(0x666666);
point5.position.set(-400, 200, 300); //点光源位置
that.Scene.add(point5); //点光源添加到场景中
var point6 = new THREE.PointLight(0x666666);
point6.position.set(-400, -200, 300); //点光源位置
that.Scene.add(point6); //点光源添加到场景中
var point7 = new THREE.PointLight(0x666666);
point7.position.set(-400, 200, -300); //点光源位置
that.Scene.add(point7); //点光源添加到场景中
var point8 = new THREE.PointLight(0x666666);
point8.position.set(400, -200, -300); //点光源位置
that.Scene.add(point8); //点光源添加到场景中
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;
}
} );
//获取模型，并添加到场景
var model=obj.scene;
that.Scene.add(model);
//将模型绑定到动画混合器里面
that.mixer = new THREE.AnimationMixer( model );
//同时将这个外部模型的动画全部绑定到动画混合器里面
for (var i=0;i<obj.animations.length;i++){
that.mixer.clipAction(obj.animations[i]).play();
}
})
}
}
}
css
