vue + threejs 添加 gui 第一个demo

安装

cnpm install threejs -D

安装 dat.gui ，gui调试时候很⽅便的调节相关的值，从⽽影响最后绘制的结果

cnpm install --save dat.gui

import * as dat from 'dat.gui';
const gui = new dat.GUI();

实现效果

代码实现

<template>
    <div>
        <div id="container"></div>
    </div>

</template>

<script>
    import * as Three from "three";
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
    import * as dat from 'dat.gui';

    export default {
        name: "ThreeTest",
        data() {
            return {
                container: null,
                renderer: null,
                camera: null,
                scene: null,
                controls: null,
                mesh: null,
                axes: null,
            };

        },
        methods: {
            init() {
                this.initThree()

                let planeGeometry = new Three.PlaneGeometry(250, 250);
                let planeMaterial = new Three.MeshLambertMaterial({ color: 0xCCCCCC })
                let meshOne = new Three.Mesh(planeGeometry, planeMaterial);
                meshOne.rotation.x = -0.5 * Math.PI
                meshOne.position.set(10, 0, 0)
                meshOne.receiveShadow = true

                this.scene.add(meshOne)

                let ambinLight = new Three.AmbientLight(0xAAAAAA)
                this.scene.add(ambinLight)

                let geometry = new Three.BoxBufferGeometry(8, 8, 8);
                let material = new Three.MeshLambertMaterial({ color: 0xff2266 });
                this.mesh = new Three.Mesh(geometry, material);
                this.mesh.position.set(5, 20, 20)
                this.scene.add(this.mesh);
                this.mesh.castShadow = true

                let spotLight = new Three.SpotLight(0XFFFFFF)
                spotLight.position.set(-0, 50, 50)
                spotLight.castShadow = true
                spotLight.shadow.mapSize = new Three.Vector2(1024, 1024)
                spotLight.shadow.camera.far = 200
                spotLight.shadow.camera.near = 10
                this.scene.add(spotLight);

                window.addEventListener('resize', this.onWindowResize, false);
                this.initControls()
                this.GUI()

            },
            initThree() {
                this.container = document.getElementById("container");
                this.renderer = new Three.WebGLRenderer({ antialias: true });
                this.renderer.setClearColor(0xeeeeee, 0.5)
                this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
                this.renderer.shadowMap.enabled = true
                this.container.appendChild(this.renderer.domElement);
                this.camera = new Three.PerspectiveCamera(
                    70,
                    window.innerWidth / window.innerHeight,
                    0.01,
                    1000
                );

                this.scene = new Three.Scene();
                this.camera.position.set(-30, 45, 35);
                this.camera.lookAt(this.scene.position)
            },
            animate() {
                requestAnimationFrame(this.animate);
                this.mesh.rotation.x += 0.001;
                this.mesh.rotation.y += 0.002;
                this.controls.update();
                this.renderer.render(this.scene, this.camera);
            },
            initControls() {
                this.controls = new OrbitControls(this.camera, this.renderer.domElement)
                this.axes = new Three.AxesHelper(100)
                this.scene.add(this.axes)
            },
            onWindowResize() {
                this.camera.aspect = window.innerWidth / window.innerHeight;
                this.camera.updateProjectionMatrix();
                this.renderer.setSize(window.innerWidth, window.innerHeight);
            },
            GUI() {
                let gui = new dat.GUI();
                var testObj = {
                    x: 10,
                    y: "20",
                    z: 30,
                    color: '#66ccff',
                };
                var f = gui.addFolder('入门');
                f.add(testObj, "x", 1, 50, 0.02).onChange(e => {
                    this.camera.position.x = e
                });
                f.add(testObj, "y");
                f.add(testObj, "z");
                f.addColor(testObj, "color");
                f.open();
            },

        },
        mounted() {
            this.init();
            this.animate();
        },

    };
</script>

<style scoped>
    #container {
        position: fixed;
        height: 100%;
        width: 100%;

    }
</style>

粒子实现效果

代码实现

<template>
    <div>
        <div id="container"></div>
    </div>

</template>

<script>
    import * as Three from 'three'
    import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
    import * as dat from 'dat.gui';
    export default {
        name: "ThreeTest",
        data() {
            return {
                camera: null,
                scene: null,
                renderer: null,
                mesh: null,
                axes: null,
                trackballControls:null,
                clock:null,
                sphere:null,
                halfWidth :null,
                halfHeight :null,
                effectFilmComposer:null,
                bloomComposer:null,
                dotScreeComposer:null,
                points:null,
            };
        },
        methods: {

             init() {
                this.initThree()

                let planeGeometry = new Three.PlaneGeometry(2500, 2500);
                let planeMaterial = new Three.MeshLambertMaterial({ color: 0xCCCCCC })
                let meshOne = new Three.Mesh(planeGeometry, planeMaterial);
                meshOne.rotation.x = -0.5 * Math.PI
                meshOne.position.set(500,-500, 20)
                meshOne.receiveShadow = true

                this.scene.add(meshOne)

                let ambinLight = new Three.AmbientLight(0xAAAAAA)
                this.scene.add(ambinLight)

                // let geometry = new Three.BoxBufferGeometry(8, 8, 8);
                // let material = new Three.MeshLambertMaterial({ color: 0xff2266 });
                // this.mesh = new Three.Mesh(geometry, material);
                // this.mesh.position.set(5, 20, 20)
                // this.scene.add(this.mesh);
                // this.mesh.castShadow = true
                this.pointShow()

                let spotLight = new Three.SpotLight(0XFFFFFF)
                spotLight.position.set(-0, 50, 50)
                spotLight.castShadow = true
                spotLight.shadow.mapSize = new Three.Vector2(1024, 1024)
                spotLight.shadow.camera.far = 200
                spotLight.shadow.camera.near = 10
                this.scene.add(spotLight);

                window.addEventListener('resize', this.onWindowResize, false);
                this.initControls()
                this.GUI()

            },
            initThree() {
                this.container = document.getElementById("container");
                this.renderer = new Three.WebGLRenderer({ antialias: true });
                this.renderer.setClearColor(0xeeeeee, 0.5)
                this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
                this.renderer.shadowMap.enabled = true
                this.container.appendChild(this.renderer.domElement);
                this.camera = new Three.PerspectiveCamera(
                    70,
                    window.innerWidth / window.innerHeight,
                    0.01,
                    2000
                );

                this.scene = new Three.Scene();
                this.camera.position.set(-1000,500, 1000);
                this.camera.lookAt(this.scene.position)
            },
            animate() {
                requestAnimationFrame(this.animate);
                // this.mesh.rotation.x += 0.001;
                // this.mesh.rotation.y += 0.002;
                this.controls.update();
                this.renderer.render(this.scene, this.camera);
            },
            initControls() {
                this.controls = new OrbitControls(this.camera, this.renderer.domElement)
                this.axes = new Three.AxesHelper(2000)
                this.scene.add(this.axes)
            },
            onWindowResize() {
                this.camera.aspect = window.innerWidth / window.innerHeight;
                this.camera.updateProjectionMatrix();
                this.renderer.setSize(window.innerWidth, window.innerHeight);
            },
            GUI() {
                let gui = new dat.GUI();
                var testObj = {
                    x: 10,
                    y: "20",
                    z: 30,
                    color: '#66ccff',
                };
                var f = gui.addFolder('入门');
                f.add(testObj, "x", 1, 50, 0.02).onChange(e => {
                    this.camera.position.x = e
                });
                f.add(testObj, "y");
                f.add(testObj, "z");
                f.addColor(testObj, "color");
                f.open();
            },

            pointShow(){
                const particles = 16000;
				const geometry = new Three.BufferGeometry();
				const positions = [];
				const colors = [];
 
				const color = new Three.Color();
 
				const n = 1000, n2 = n / 2; // particles spread in the cube
 
				for ( let i = 0; i < particles; i ++ ) {
 
					// positions
 
					const x = Math.random() * n - n2;
					const y = Math.random() * n - n2;
					const z = Math.random() * n - n2;
 
					positions.push( x, y, z );
					// colors
					const vx = ( x / n ) + 0.5;
					const vy = ( y / n ) + 0.5;
					const vz = ( z / n ) + 0.5;
 
					color.setRGB( vx, vy, vz );
 
					colors.push( color.r, color.g, color.b );
 
				}
 
				geometry.setAttribute( 'position', new Three.Float32BufferAttribute( positions, 3 ) );
				geometry.setAttribute( 'color', new Three.Float32BufferAttribute( colors, 3 ) );
 
				geometry.computeBoundingSphere();
 
				const material = new Three.PointsMaterial( { size: 15, vertexColors: true } );
 
				this.points = new Three.Points( geometry, material );
                this.points.castShadow = true
				this.scene.add( this.points);

            }
        },

        mounted() {
            this.init();
            this.animate();
        },

    };
</script>

<style scoped>
    #container {
        position: fixed;
        height: 100%;
        width: 100%;
        margin: 0;
    }
</style>

只是一些简单的实现方便入手，

Three 之 three.js （webgl）涉及的各种材质简单说明(常用材质配有效果图)