threeJS 通过组件形式和vueJS结合开发实例

效果图

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18587.html

导入文件

npm install three --save-dev文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18587.html

    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>`,
       })

向组件里面注册数据和方法,并调用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/18587.html

(
       '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>