Three.js使用案例

已于 2022-05-12 15:01:02 修改
阅读量3k 收藏 13
点赞数 1
分类专栏： THREE.JS 文章标签： javascript 开发语言 html
于 2022-05-12 14:55:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42552006/article/details/124731283
版权

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

喜欢猪的小男孩
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Three.js基本使用
caoyan0829的博客
09-16 357
1.文件结构 2.效果（是动图，自己试一下吧） 3.代码 // 创建场景 const scene = new THREE.Scene() // 创建相机 PerspectiveCamera：透视视角 OrthographicCamera：正射投影 // PerspectiveCamera('视角 60-90','投影窗口长宽比','从距离摄像机多远开始渲染','从距离摄像机多远结束渲染 1000') let wid = window.innerWidth let hei..
threejs使用概述
lisiur的博客
03-06 808
创建三维图像的一般步骤1. 创建HTML的基本骨架<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My first WebGL</title> <!-- 为了更好的展示效果，不然会有溢出 --> <style> body{ margin:0
简单入门threejs案例
02-09
简单入门threejs案例
19 个最佳Three.JS 示例
ygtu2018的博客
08-29 3187
分享 threejs.org 的 19 个最佳三个 JS 示例
ThreeJS 官方案例学习（webgl_animation_multiple）
最新发布
qq_59315646的博客
05-24 307
【代码】ThreeJS 官方案例学习（webgl_animation_multiple）
Threejs简单介绍(含案例演示)
热门推荐
土豆块嘎嘣脆的博客
10-14 1万+
编写canvas的方法
threejs示例
峰回路转的博客
01-06 4667
WEB 3D 仿真控制测试前言本示例界面如下全部代码结束 前言 本示主要介绍threejs简单应用，仅供入门学习，涉及商用产生的风险本人概不负责。其中涉及obj模型加载，obj模型由SU创建并导出，模型表面经过贴图处理，模型不能搞太多顶点，建议贴图处理，否则场景展现会卡，另外obj加载近场景后会以group类型存放。示例中还会涉及材质变化、物体选中、物体移动、以及全局小地图的简单实现。对于threejs相关概念可以参考threejs.org官网，本文中所引用js库经过测试可用。 本示例界面如下 全
这10个Three.js开源实战项目，值得你看看
前端达人
08-06 4641
"每一个伟大的想法，都值得被3D化！——Three.js，一款引领未来的前端3D渲染库！"想一窥未来世界的面貌吗？想让你的网页拥有无限可能性吗？那么，欢迎来到Three.js的世界！在这里，我们用科技与艺术挑战界限，让想象成为现实。Three.js——它可以让你如同魔法师一般，用代码塑造3D世界，让你的创意在屏幕上生动展现。大家好，我是itboy。今天给大家分享10个基于Three.js 的实战项...
three.js 入门案例详解
10-18
本篇文章将通过一个简单的入门案例，帮助初学者理解three.js 的基本使用方法。 1. **下载与引入three.js** three.js 的最新版本可以从其GitHub仓库（https://github.com/mrdoob/three.js）获取。下载后，将其引用...
three.js. 3D机房项目
09-06
【描述】"使用three.js开发的3D机房项目"意味着项目的核心是three.js，这是一个开源的JavaScript库，专门用于创建和展示3D计算机图形。通过这个项目，开发者可以构建交互式的、高细节度的机房模型，包括服务器、空调...
Three.js-webgl物联网粮仓3D可视化
03-12
Three.js是一个强大的JavaScript库，专门用于在Web浏览器中创建和展示3D图形。它充分利用WebGL API，使开发者无需深入理解底层复杂的图形编程，就能便捷地构建出引人入胜的3D场景。在这个项目中，Three.js用于构建...
Three.js实战常用技巧
04-27
分享课程——Three.js实战常用技巧视频教程，课程一共12章，140多节，结合了很多实战案例，课程主要针对three.js实际开发中常用的一些技巧进行讲解，提供有配套的源码和文档资料下载！希望对那些想提升Three.js技能...
threejs官方案例
03-22
包含各种模型和动画加载，以及其他特效案例，功能案例。 资源来自开源github网站，故不设置积分。 国内浏览github极其慢，经常由于网络原因下载失败，故将此资源放置在CSDN，方便大家学习，发扬IT开源共享精神，共同...
Threejs示例一
weixin_46415189的博客
11-17 2094
three.js教程demo
50套Threejs实现的Web3D学习案例，总有一套适合你
左本Web3D
01-03 2454
个人主页：，更多案例预览请点击==》个人简介：专注Web3D使用ThreeJS实现3D效果技巧和学习案例💕 💕积跬步以至千里，致敬每个爱学习的你。喜欢的话请三连，有问题请私信或者加微信。在18年至23年这期间，做了很多web3D方面的项目，如：数字孪生、元宇宙、VR全景、3D大屏、平台工具等项目软件。大部分都是我负责的项目，从开始不知道如何与模型设计、UI设计配合到总结出一套如何与模型设计、UI设计配合可以实现理想效果的经验。过程中也遇到多端，性能，兼容、配合各种各样的问题，踩了很多坑，也学到了很多
Three.js的入门+案例
一缕青丝飞向远方的博客
10-27 1223
Three.js入门，刚接触，一起学习
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）
逆境清醒的博客
11-29 3360
Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一）：案例运行效果，Three.js代码正常运行显示条件，关键代码解释（1）、Threejs绘图思路（2）、构建一个三维空间场景（3）、选择一个观察点(a)、three.js的右手坐标系图解(b)、three.js中的正交投影和透视投影原理图解(c)、实例中所使用的透视投影代码语法解释（4）、添加供观察的物体（5）、场景渲染
20个基于Three.js的代码示例
weixin_43298747的博客
04-27 625
这些是一些简单的示例，涵盖了Three.js的基本功能和一些高级功能。- 使用WebRTC或WebSocket等技术建立网络连接。- 使用Cannon.js或其他物理引擎创建物理模拟。- 创建一个简单的三维场景，包括相机、场景和渲染器。- 使用Tween.js或GSAP等库创建动画效果。- 添加后期处理效果，如模糊、色调映射等。- 在模型上应用骨骼动画或关键帧动画。- 使用立方体贴图创建环境映射。- 创建基于文本的3D几何体。- 创建一个简单的粒子系统。- 创建一个简单的立方体。- 在模型上添加贴花效果。
16 Three.js 游戏操作案例
现在学习也不晚
10-08 6498
上面是我们这节教程最后显示出来的效果。案例实现了人物跟随着移动操作杆进行移动并执行跑步动作，右边的攻击按钮可以实现攻击，短时间内连按可以实现不同的攻击动作。接下来我将和大家一起一步一步的实现这个效果。 场景的搭建 首先，我们需要把舞台搭建出来，先创建scene场景： 创建scene scene = new THREE.Scene(); scene.background = ne...
three.js案例
01-18
以下是一个使用Three.js创建的简单案例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Three.js Example</title> <style> body { margin: 0; } canvas { display: block; } </style> </head> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script> <script> // 创建场景 var scene = new THREE.Scene(); // 创建相机 var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; // 创建渲染器 var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 创建几何体 var geometry = new THREE.BoxGeometry(); var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // 渲染场景 function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate(); </script> </body> </html> ``` 这个案例创建了一个简单的场景，包含一个立方体，通过旋转来实现动画效果。你可以将以上代码保存为一个HTML文件，然后在浏览器中打开该文件，就可以看到一个旋转的立方体。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

喜欢猪的小男孩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值