threeJS 通过组件形式和vueJS结合开发实例
效果图
导入文件
npm install three --save-dev
import * as THREE from "./node_modules/three/build/";
import {OrbitControls} from "./node_modules/three/examples/jsm/controls/";
import {Water} from './node_modules/three/examples/jsm/objects/';
import {Sky} from "./node_modules/three/examples/jsm/objects/";
VUE组件
(
'three',
{
template:`<div>
<div></div>
</div>`,
})
向组件里面注册数据和方法,并调用
(
'three',
{
template:`<div>
<div></div>
</div>`,
data(){
return{
renderer:"",
scene:"",
camera:"",
sphere:"",
waterMesh:"",
}
},
methods: {
onload:function(){
let container=("container");//获取container
this.scene=new THREE.Scene();//创建场景
this.camera=new THREE.PerspectiveCamera(45,);
( 30, 20, 100 );
this.renderer=new THREE.WebGLRenderer({antialias:true});
();
();
();
let directionalLight=new THREE.DirectionalLight(0xffffff, );
(directionalLight);
//创建水平面
let waterPlane=new THREE.PlaneBufferGeometry(10000,10000);
=new Water(waterPlane,{
textureWidth:512,//画布宽度
textureHeight:512,//画布高度
waterNormals:new THREE.TextureLoader().load("./img/",function (texture) {
法向量贴图
}),
alpha:透明度
sunDirection: ().normalize(),
sunColor: 0xffffff,//太阳的颜色
waterColor:0x001e0f,//水的颜色
distortionScale: 物体倒影的分散度
fog: !== undefined,
});
.rotation.x=-/2;
();
//创建天空盒子
// Skybox
let sky = new Sky();
let uniforms = sky.material.uniforms;
uniforms[ 'turbidity' ].value = 10;//内置变量
uniforms[ 'rayleigh' ].value = 2;//视觉效果就是傍晚晚霞的红光的深度
uniforms[ 'luminance' ].value = 1;//视觉效果整体提亮或变暗0-1
uniforms[ 'mieCoefficient' ].value = 0.005;
uniforms[ 'mieDirectionalG' ].value = ;
let parameters = {
distance: 400,
inclination: 倾向
azimuth: 方位
};
let cubeCamera = new THREE.CubeCamera( 0.1, 1, 512 );//创建反光效果
.generateMipmaps = true;
.minFilter = THREE.LinearMipmapLinearFilter;
this.scene.background = cubeCamera.renderTarget;
function updateSun(waterMesh,renderer) {
let theta = * ( parameters.inclination - 0.5 );//* -0.0314
let phi = 2 * * ( parameters.azimuth - 0.5 );//*=-1.8535
.x = parameters.distance * ( phi );//399.79
.y = parameters.distance * ( phi ) * ( theta );//-0.14
.z = parameters.distance * ( phi ) * ( theta );//-0.323
sky.material.uniforms[ 'sunPosition' ].value =( );//设置太阳的位置
[ 'sunDirection' ].( ).normalize();//设置太阳的光照方向，并进行归一化(化为单位值)
(renderer,sky);
}
updateSun(,this.renderer);
//创建多边形物体
let geometry = new THREE.IcosahedronBufferGeometry( 20, 1 );
let count = geometry.attributes.position.count;
let colors = [];
let color = new THREE.Color();
for ( let i = 0; i < count; i +=3 ) {//设置颜色
( () * 0xffffff );//255
( color.r, color.g, color.b );
( color.r, color.g, color.b );
( color.r, color.g, color.b );
}
//(colors);
( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );//向顶点传入顶点颜色
let material = new THREE.MeshStandardMaterial( {
vertexColors: 使用顶点颜色进行着色
roughness: 0.0,
flatShading: true,
envMap: ,//设置环境贴图
side:
} );
= new THREE.Mesh( geometry, material );
( );
let sphereGeometry=new THREE.SphereBufferGeometry(8,100,100);
let sphereMaterial=new THREE.MeshBasicMaterial({envMap:});
let sphereMesh=new THREE.Mesh(sphereGeometry,sphereMaterial);
(30,10,0);
(sphereMesh);
let contorl=new OrbitControls(this.camera,);//添加鼠标滚动缩放，旋转对象
最大最小相机移动距离(景深相机)
contorl.maxDistance=200;
contorl.maxPolarAngle= * 0.495; //最大仰视角和俯视角
contorl.minPolarAngle=0;
contorl.update();
('resize',);//浏览器大小改变监听
},
onResize:function() {
this.camera.aspect=window.innerWidth/window.innerHeight;
this.camera.updateProjectionMatrix();
();
},
run:function() {
requestAnimationFrame();
let time = () * 0.001;
.position.y = ( time ) * 20 + 5;//物体上下移动
.rotation.x = time * 0.5;
.rotation.z = time * 0.51;
.material.uniforms['time'].value += 1.0 / 60.0;//创建水面微波
();
}
},
mounted(){
//(12);
();
();
//();
},
}
);
初始化VUE
let vue=new Vue({
el:"#vue"
});
总代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/"></script>
<style>
html,body{
padding: 0;
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<three></three>
</div>
<script type="module">
import * as THREE from "./node_modules/three/build/";
import {OrbitControls} from "./node_modules/three/examples/jsm/controls/";
import {Water} from './node_modules/three/examples/jsm/objects/';
import {Sky} from "./node_modules/three/examples/jsm/objects/";
(
'three',
{
template:`<div>
<div></div>
</div>`,
data(){
return{
renderer:"",
scene:"",
camera:"",
sphere:"",
waterMesh:"",
}
},
methods: {
onload:function(){
let container=("container");//获取container
this.scene=new THREE.Scene();//创建场景
this.camera=new THREE.PerspectiveCamera(45,);
( 30, 20, 100 );
this.renderer=new THREE.WebGLRenderer({antialias:true});
();
();
();
let directionalLight=new THREE.DirectionalLight(0xffffff, );
(directionalLight);
//创建水平面
let waterPlane=new THREE.PlaneBufferGeometry(10000,10000);
=new Water(waterPlane,{
textureWidth:512,//画布宽度
textureHeight:512,//画布高度
waterNormals:new THREE.TextureLoader().load("./img/",function (texture) {
法向量贴图
}),
alpha:透明度
sunDirection: ().normalize(),
sunColor: 0xffffff,//太阳的颜色
waterColor:0x001e0f,//水的颜色
distortionScale: 物体倒影的分散度
fog: !== undefined,
});
.rotation.x=-/2;
();
//创建天空盒子
// Skybox
let sky = new Sky();
let uniforms = sky.material.uniforms;
uniforms[ 'turbidity' ].value = 10;//内置变量
uniforms[ 'rayleigh' ].value = 2;//视觉效果就是傍晚晚霞的红光的深度
uniforms[ 'luminance' ].value = 1;//视觉效果整体提亮或变暗0-1
uniforms[ 'mieCoefficient' ].value = 0.005;
uniforms[ 'mieDirectionalG' ].value = ;
let parameters = {
distance: 400,
inclination: 倾向
azimuth: 方位
};
let cubeCamera = new THREE.CubeCamera( 0.1, 1, 512 );//创建反光效果
.generateMipmaps = true;
.minFilter = THREE.LinearMipmapLinearFilter;
this.scene.background = cubeCamera.renderTarget;
function updateSun(waterMesh,renderer) {
let theta = * ( parameters.inclination - 0.5 );//* -0.0314
let phi = 2 * * ( parameters.azimuth - 0.5 );//*=-1.8535
.x = parameters.distance * ( phi );//399.79
.y = parameters.distance * ( phi ) * ( theta );//-0.14
.z = parameters.distance * ( phi ) * ( theta );//-0.323
sky.material.uniforms[ 'sunPosition' ].value =( );//设置太阳的位置
[ 'sunDirection' ].( ).normalize();//设置太阳的光照方向，并进行归一化(化为单位值)
(renderer,sky);
}
updateSun(,this.renderer);
//创建多边形物体
let geometry = new THREE.IcosahedronBufferGeometry( 20, 1 );
let count = geometry.attributes.position.count;
let colors = [];
let color = new THREE.Color();
for ( let i = 0; i < count; i +=3 ) {//设置颜色
( () * 0xffffff );//255
( color.r, color.g, color.b );
( color.r, color.g, color.b );
( color.r, color.g, color.b );
}
//(colors);
( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );//向顶点传入顶点颜色
let material = new THREE.MeshStandardMaterial( {
vertexColors: 使用顶点颜色进行着色
roughness: 0.0,
flatShading: true,
envMap: ,//设置环境贴图
side:
} );
= new THREE.Mesh( geometry, material );
( );
let sphereGeometry=new THREE.SphereBufferGeometry(8,100,100);
let sphereMaterial=new THREE.MeshBasicMaterial({envMap:});
let sphereMesh=new THREE.Mesh(sphereGeometry,sphereMaterial);
(30,10,0);
(sphereMesh);
let contorl=new OrbitControls(this.camera,);//添加鼠标滚动缩放，旋转对象
最大最小相机移动距离(景深相机)
contorl.maxDistance=200;
contorl.maxPolarAngle= * 0.495; //最大仰视角和俯视角
contorl.minPolarAngle=0;
contorl.update();
('resize',);//浏览器大小改变监听
},
onResize:function() {
this.camera.aspect=window.innerWidth/window.innerHeight;
this.camera.updateProjectionMatrix();
();
},
run:function() {
requestAnimationFrame();
let time = () * 0.001;
.position.y = ( time ) * 20 + 5;//物体上下移动
.rotation.x = time * 0.5;
.rotation.z = time * 0.51;
.material.uniforms['time'].value += 1.0 / 60.0;//创建水面微波
();
}
},
mounted(){
//(12);
();
();
//();
},
}
);
let vue=new Vue({
el:"#vue"
});
</script>
</body>
</html>
THE END
