Three.js使用案例

1. 控件的初始化(scene、camera、renderer、controls、stats、ambientLight)

//场景一级辅助空间坐标系的初始化

function initScene() {

            showDiv = document.getElementById("tccDraw");

            scene = new THREE.Scene();

            var axesHelper = new THREE.AxesHelper(500);

            scene.add(axesHelper);

        }

        /* 相机 */

        function initCamera() {

            //透视相机

            camera = new THREE.PerspectiveCamera(45, showDiv.clientWidth / showDiv.clientHeight, 10, 15000);

            camera.position.set(0, 500, 350);

            camera.lookAt(new THREE.Vector3(0, 0, 0));

        }

/* 渲染器 */

        function initRender() {

            renderer = new THREE.WebGLRenderer({

                antialias: true

            });

            renderer.setSize(showDiv.clientWidth, showDiv.clientHeight);

            showDiv.appendChild(renderer.domElement);

        }

        /* 灯光 */

        function initLight() {

            let ambientLight = new THREE.AmbientLight(0xCCCCCC);

            scene.add(ambientLight);

            directionalLight = new THREE.DirectionalLight(0x585858);

            directionalLight.position.set(0, 3500, 0);

            scene.add(directionalLight);

        }

        /* 控制器 */

        function initControls() {

            controls = new THREE.OrbitControls(camera, showDiv);

        }

        /* 初始化性能插件status */

        function initStats(){

            stats = new Stats();

            document.body.appendChild(stats.dom);

        }

        /* 循环渲染 */

        function animate() {

            stats.update();

            requestAnimationFrame(animate);

            renderer.render(scene, camera);

        }

2. 点模型、线模型以及自定义几何体

        /**

         * 自定义几何体

         **/

        function self_geometry() {

            var geometry = new THREE.BufferGeometry();

            var vertices = new Float32Array([

                0, 0, 0, //顶点1坐标

                50, 0, 0, //顶点2坐标

                0, 100, 0, //顶点3坐标

                0, 0, 0, //顶点4坐标

                0, 0, 100, //顶点5坐标

                50, 0, 0, //顶点6坐标

            ]);

            var colors = new Float32Array([

                0, 0, 0, //顶点1颜色

                1, 0, 1, //顶点2颜色

                0, 1, 0, //顶点3颜色

                1, 1, 1, //顶点4颜色

                0, 1, 1, //顶点5颜色

                0, 0, 1, //顶点6颜色

            ]);

            var normals = new Float32Array([

                0, 0, 1, //顶点1法向量

                0, 0, 1, //顶点2法向量

                0, 0, 1, //顶点3法向量

                0, 1, 0, //顶点4法向量

                0, 1, 0, //顶点5法向量

                0, 1, 0, //顶点6法向量

            ]);

            geometry.attributes.position = new THREE.BufferAttribute(vertices, 3);

            geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

            geometry.attributes.normal = new THREE.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据

            var material = new THREE.MeshBasicMaterial({

                vertexColors: THREE.VertexColors,

                side: THREE.DoubleSide

            });

            var mesh = new THREE.Mesh(geometry, material);

            scene.add(mesh);

        };

        /**

         * 点模型

         **/

        function self_points() {

            var geometry = new THREE.BufferGeometry();

            var vertices = new Float32Array([

                10, 30, 10, //顶点1坐标

                10, 100, 30, //顶点2坐标

                5, 15, 50, //顶点3坐标

                20, 60, 100, //顶点4坐标

                40, 60, 100, //顶点5坐标

                50, 33, 100, //顶点6坐标

            ]);

            var colors = new Float32Array([

                0, 0, 0, //顶点1颜色

                1, 0, 1, //顶点2颜色

                0, 1, 0, //顶点3颜色

                1, 1, 1, //顶点4颜色

                0, 1, 1, //顶点5颜色

                0, 0, 1, //顶点6颜色

            ]);

            var attribue = new THREE.BufferAttribute(vertices, 3);

            geometry.attributes.position = attribue;

            geometry.attributes.color = new THREE.BufferAttribute(colors, 3);

            var material1 = new THREE.PointsMaterial({

                vertexColors: THREE.VertexColors,

                size: 10.0

            });

            var points = new THREE.Points(geometry, material1);

            scene.add(points);

        };

        /**

         * 线模型测试

         **/

        function self_line() {

            var geometry = new THREE.BufferGeometry();

            var vertices = new Float32Array([

                0, 0, 0, //顶点1坐标

                100, 0, 0, //顶点2坐标

                0, 10, 30, //顶点3坐标

                200, 0, 10, //顶点4坐标

                0, 50, 10, //顶点5坐标

                50, 10, 10, //顶点6坐标

            ]);

            var attribue = new THREE.BufferAttribute(vertices, 3);

            geometry.attributes.position = attribue;

            var material2 = new THREE.LineBasicMaterial({

                color: 0xff0000,

            });

            var line = new THREE.Line(geometry, material2);

            scene.add(line);

        }

3. 材质数组填充彩色立方体

 

      /*构建各个面颜色随机的立方体*/

        function addBox(){

            var cubeGeo = new THREE.BoxGeometry(50,50,50);

            var mats = [];

            for(var i=0;i6;i++){

                var material = new THREE.MeshBasicMaterial({ color: new THREE.Color(Math.random(0,5) * 0xffffff)});

                mats.push(material);

            }

            mesh = new THREE.Mesh(cubeGeo, mats);

            scene.add(mesh);

        }

4. 加载OBJ模型

        /*添加OBJ模型*/

        function addOBJ(){

            var OBJLoader = new THREE.OBJLoader();//obj加载器

            var MTLLoader = new THREE.MTLLoader();

            MTLLoader.load("models/dt/dt.mtl",function(materials){

                OBJLoader.setMaterials(materials);

                OBJLoader.load("models/dt/dt.obj",function(obj){

                var object = obj;

                object.scale.set(30,30,30);

                scene.add(object);

            });

            })

        }

5. 监听以及场景的放大缩小

    input type="button" class="big" value="放大" onclick="zoomOut()" style="float: right;">

        function zoomOut(){

            console.log("触发了场景放大的方法");

            controls.zoomIn();

        }

/*切记循环渲染中需要更新控制器*/

      controls.update();

6. FBX模型以及动画的播放

        /*添加FBX模型*/

        function addFBX() {

            var loader = new THREE.FBXLoader();

            loader.load('models/fbx/Samba Dancing.fbx', function (object) {

                //动画

                mixers = new THREE.AnimationMixer(object);

                var action = mixers.clipAction(object.animations[0]);

                action.play();

                object.traverse(function (child) {

                    if (child.isMesh) {

                        child.castShadow = true;

                        child.receiveShadow = true;

                    }

                });

                //缩放

                object.scale.set(0.5, 0.5, 0.5);

                //位置

                object.position.set(0, 0, 0);

                scene.add(object);

            });

        }

/* 循环渲染中需要添加 */

const delta = clock.getDelta();

if (mixers) mixers.update(delta);

!!!最新版本的THREE.JS写法有变动 如果 发现动画无法播放 可 从博主的git中取正常的版本

7. 平面添加背景图

        function addPlane() {

            //实心

            var planeGeo2 = new THREE.PlaneGeometry(1600, 1600);

            var planeTexture = new THREE.TextureLoader().load("models/cerberus/Cerberus_RM.jpg");

            planeGeo2.translate(0,0,-400);

            var mesh2 = new THREE.MeshBasicMaterial({

                map:planeTexture

            });

            mesh2.side = THREE.DoubleSide;

            var plane2 = new THREE.Mesh(planeGeo2, mesh2);

            plane2.position.set(100,100,100);

            scene.add(plane2);

        }

8. 天空盒子最简单的实现方法(虽然瑕疵很多 但这只是小练习)

其实就是彩色正方体的翻版 只不过材质渲染变成了图片

        /*加载天空盒子*/

        function skyBox(){

            var path = "models/person/";

            var directions = ["a2p31-t9cvs","a4qdn-ootih","a8lox-cdv4r","afueh-p492r","aqh09-3oiie","ayit8-ad9xb"];

            var format = ".jpg"

            var skyGeometry = new THREE.BoxGeometry(5000,5000,5000);

            var materialArray = [];

            for(var i = 0;i6;i++){

                materialArray.push(new THREE.MeshBasicMaterial({

                    map:THREE.ImageUtils.loadTexture(path+directions[i]+format),

                    side:THREE.BackSide

                }));

            }

            var skyMaterial = new THREE.MeshFaceMaterial( materialArray );

            var skyBox = new THREE.Mesh( skyGeometry, skyMaterial );//创建一个完整的

            scene.add(skyBox);

        }

9. 加载文字标注

        /*创建css2dobject*/

        function create2DObject() {

            var div = document.createElement("div");

            div.style.width = '200px';

            div.style.height = '100px';

            div.style.background = 'rgba(10,18,51,0.8)';

            div.style.color = '#ffffff'

            div.textContent = '彩色旋转小盒子'

            div.className = 'label'

            var label = new THREE.CSS2DObject(div);

            label.position.set(0, 110, 0);

            var imgDiv = document.createElement("img");

            imgDiv.src = "resource/create.gif";

            imgDiv.width = 30;

            imgDiv.height = 30;

            div.appendChild(imgDiv);

            scene.add(label);

        }

10. 挤压多边形(ExtrudeGeometry),以及点击对象改变颜色

        /* 生成多边几何体的点 */

        function createExtrudeGeometry(points) {

            var shape = new THREE.Shape(points);

            var options = {

                depth: 10

            }

            var ExtrudeGeometry = new THREE.ExtrudeGeometry(shape, options);

            var mater = new THREE.MeshBasicMaterial({

                color: 0xff0354,

            });

            mesh = new THREE.Mesh(ExtrudeGeometry, mater);

            scene.add(mesh);

        }

/* 创建多个几何体 */

        function manyExtrudeGeometry() {

            var points1 = [

                new THREE.Vector2(-22, 30),

                new THREE.Vector2(-18, 20),

                new THREE.Vector2(-20, 10),

                new THREE.Vector2(-30, 10),

                new THREE.Vector2(-40, 10),

                new THREE.Vector2(-22, 30),

            ]

            createExtrudeGeometry(points1);

            var points1 = [

                new THREE.Vector2(22, 30),

                new THREE.Vector2(18, 20),

                new THREE.Vector2(20, 10),

                new THREE.Vector2(30, 10),

                new THREE.Vector2(40, 10),

                new THREE.Vector2(22, 30),

            ]

            createExtrudeGeometry(points1);

            var points1 = [

                new THREE.Vector2(50, 60),

                new THREE.Vector2(50, 50),

                new THREE.Vector2(33, 44),

                new THREE.Vector2(41, 33),

                new THREE.Vector2(52, 22),

                new THREE.Vector2(22, 40),

            ]

            createExtrudeGeometry(points1);

            var points1 = [

                new THREE.Vector2(100, 150),

                new THREE.Vector2(120, 103),

                new THREE.Vector2(140, 196),

                new THREE.Vector2(170, 133),

                new THREE.Vector2(150, 166),

                new THREE.Vector2(180, 75),

            ]

            createExtrudeGeometry(points1);

        }

        /* 通过射线获取点击的对象 */

        function getPickPosition(event) {

            console.log("触发拾取对象的方法");

            var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

            var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

            pick.x = (event.offsetX / width) * 2 - 1;

            pick.y = (event.offsetY / height) * -2 + 1;

            console.log(event.offsetX);

            console.log(event.offsetY);

            console.log("w:" + width + "h:" + height);

            console.log("x=" + pick.x + "   y=" + pick.y);

            var Objects = null;

            var raycaster = new THREE.Raycaster();

            raycaster.setFromCamera(pick, camera);//根据鼠标屏幕上的位置,和场景中的相机去计算射线位置

            intersectedObjects = raycaster.intersectObjects(scene.children);//返回的是个数组,里面包含所有拾取到的对象

            console.log(intersectedObjects);

            if (intersectedObjects.length > 0) {

                for (var i = 0; i < intersectedObjects.length; i++) {

                    intersectedObjects[i].object.material.color.set(0xffffff);

                    //outlineObj(intersectedObjects[i].object);

                }

            }

        }

11. 上一章的多边体添加辉光效果

        /* 通过射线获取点击的对象 */

        function getPickPosition(event) {

            console.log("触发拾取对象的方法");

            var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

            var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

            pick.x = (event.offsetX / width) * 2 - 1;

            pick.y = (event.offsetY / height) * -2 + 1;

            console.log(event.offsetX);

            console.log(event.offsetY);

            console.log("w:" + width + "h:" + height);

            console.log("x=" + pick.x + "   y=" + pick.y);

            var Objects = null;

            var raycaster = new THREE.Raycaster();

            raycaster.setFromCamera(pick, camera);//根据鼠标屏幕上的位置,和场景中的相机去计算射线位置

            intersectedObjects = raycaster.intersectObjects(scene.children);//返回的是个数组,里面包含所有拾取到的对象

            console.log(intersectedObjects);

            if (intersectedObjects.length > 0) {

                for (var i = 0; i < intersectedObjects.length; i++) {

                    //intersectedObjects[i].object.material.color.set(0xffffff);

                    outlineObj(intersectedObjects[i].object);

                }

            }

        }

        /* 点击的几何体添加辉光的效果 */

        function outlineObj(obj){

            console.log(obj);

            initoutline(obj);

            var objs = [];

            objs.push(obj);

            composer.addPass(renderPass);

            outlinePass.selectedObjects = objs;

            outlinePass.edgeStrength = 10.0 // 边框的亮度

            outlinePass.edgeGlow = 1// 光晕[0,1]

            outlinePass.usePatternTexture = true // 是否使用父级的材质

            outlinePass.edgeThickness = 10.0 // 边框宽度

            outlinePass.downSampleRatio = 1 // 边框弯曲度

           

            outlinePass.pulsePeriod = 5 // 呼吸闪烁的速度

            outlinePass.visibleEdgeColor.set(parseInt(0xffffff)) // 呼吸显示的颜色

            outlinePass.hiddenEdgeColor = new THREE.Color(0, 0, 0) // 呼吸消失的颜色

            outlinePass.clear = true

            composer.addPass(outlinePass)

            effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)

            effectFXAA.renderToScreen = true

            composer.addPass(effectFXAA)

        }

        /* 初始化辉光组件 */

        function initoutline(obj){

            composer = new THREE.EffectComposer(renderer);

            renderPass = new THREE.RenderPass(scene,camera);

            outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight),scene,camera,obj);

            effectFXAA = new THREE.ShaderPass(THREE.FXAAShader);

        }

附上gitee的源码空间

https://gitee.com/zheng-kangyun/three.js.git

你可能感兴趣的:(THREE.JS,javascript,开发语言,html)