three.js(使用总结一)
程序员文章站
2024-03-16 19:54:58
...
three.js使用总结
1、引入需要 的文件
<script src="./build/three.min.js"></script> <!-- 此处引入threejs基础类 -->
<script src="CSS3DRenderer.js"></script> <!-- 此处引入CSS3Drenderer.js类 -->
<!-- 以上两个文件,在下载threejs的时候就有的,引入就好 -->
2、要在前端页面中展示3d模型,我们需要的几个组成元素:
(1)场景
场景是所有物体的容器,我们要做的就是把模型装到这个容器里面。
this.scene = new THREE.Scene()
(2)相机
相机决定了场景中那个角度的景色会显示出来。
我们可以将相机理解为眼睛,眼睛的位置决定你看的角度。
var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000)
(3)渲染器
通过渲染器将我们要展示的东西渲染到domElement元素(以下是container)的画布上面。
renderer = new THREE.WebGLRenderer()
renderer.setClearColor(0x101d2c);//颜色
renderer.setSize(window.innerWidth, window.innerHeight);//范围,大小
let container = document.getElementById('container')
container.append(renderer.domElement)
(4)物体(灯光、模型等)
1、使用three.js的几何模型
var geometry = new THREE.BoxGeometry(1, 1, 1);//模型(three.js几何体)
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );//材质
var material =new THREE.MeshLambertMaterial({color:0x00ff00})
var cube = new THREE.Mesh( geometry, material );//Mesh模型对象
cube.castShadow = true;
scene.add( cube );//将模型加入到场景中
2、自定义模型的导入
var suidaoobj = new THREE.OBJLoader();
var suidaomtl = new THREE.MTLLoader();
suidaomtl.load(url, function (materials) { //加载材质mtl文件
materials.preload();
suidaoobj.setMaterials(materials);
suidaoobj.load(url, function (obj) { //加载模型obj文件
obj.position.set(-40,0,30) //坐标
obj.scale.set(1, 1, 1) //缩放
this.scene.add(obj);
})
3、灯光
光源分为点光源、坏境光、平行光等等。这里使用的是平行光。
var DirectionalLight = new THREE.DirectionalLight(0xffffff,3); //光源颜色及强度
DirectionalLight.position.set(-5000,5000,5000); //光源位置
4、渲染
renderer.render( scene, camera );
环境渲染
renderScene: function () {
requestAnimationFrame(renderScene)
renderer.render(scene, camera)
},
上一篇: HDU - 2036 改革春风吹满地 (多边形面积,三角形叉积得面积)
下一篇: 如何让Spring MVC显示自定义的404 Not Found页面 SpringSpringBoot404SpringMVC
推荐阅读
-
three.js(使用总结一)
-
Three.js 学习 1. 绘制一个旋转的立方体
-
Java NIO使用及原理分析 (一) 博客分类: Java基础 javaNIOIO
-
使用node搭建一个简单的本地服务
-
MySQL实战中,Insert语句的使用心得总结
-
用1-9九个数组成三个三位数abc,def,ghi每个数字使用一次,要求这三个三位数形成1:2:3的关系
-
使用函数判断完全平方数:输入一个正整数n,判断其是否为完全平方数,如果是,则输出”YES”,如果不是,则输出”NO”。要求定义并调用函数IsSquare(n),判断n是否为完全平方数。
-
分享一款不需要注册就可以使用的局域网内手机、电脑、智能电视间的投影APP--“幕享”
-
Android知识总结(一) 博客分类: Android Android
-
Android知识总结(一) 博客分类: Android Android