admin管理员组文章数量:1582962
threeJS简介
为了真正能够使用three.js显示任何内容,我们需要三件事:场景,相机和渲染器,以便我们可以使用相机渲染场景。github地址:https://github/mrdoob/three.js,直接下载,会非常慢,出现下载不成功。奉上资源的百度网盘地址:https://pan.baidu/s/1d5miM_0qmntxVt8QdvZ8UQ ,密码:mu1r
threeJs的几个核心对象:
- Scene(场景)
- Camera(相机)
- Light(光源)
- Mesh(模型)
- Renderer(渲染器)
- Loader(加载器,用来导入模型)
three.js中常用的语法:
语法 | 描述 |
---|---|
new THREE.Scene() | 创建场景 |
new THREE.PerspectiveCamera(num,width/height) | 创建相机,第一个参数是视野。表示看到的场景范围,以度为单位。第二个是长宽比。接下来的两个参数表示近和远裁剪平面,指对象从相机比的值越远远或近于附近将不会被渲染。 |
new THREE.WebGLRenderer() | 创建渲染器 |
renderer.setSize() | 设置渲染器尺寸 |
query.appendChild(renderer.domElement) | 将<canvas>元素添加到dom元素中 |
new THREE.Mesh(geometry, material) | 创建一个模型,第一个参数表示几何形状,第二个参数表示材质 |
scene.add() | 将参数(模型、光源等对象)添加到场景中 |
renderer.render(scene, camera) | 将场景和相机渲染到页面中 |
一个完整的简单的three.js案例:
案例代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
</head>
<body>
<script src="../js/three.js"></script>
<script>
init();
box();
animate();
var scene,camera,renderer,cube
function init(){
//创建场景
scene = new THREE.Scene();
//创建相机
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
//创建渲染器
renderer = new THREE.WebGLRenderer();
//渲染器的尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//将renderer(渲染器)的dom元素(renderer.domElement)添加到我们的HTML文档中。
//这就是渲染器用来显示场景给我们看的<canvas>元素
document.body.appendChild(renderer.domElement);
//默认情况下,当我们调用scene.add()的时候,物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。
//为了防止这种情况的发生,我们只需要将摄像机稍微向外移动一些即可。
camera.position.z = 5;
}
function box(){
//创建一个立方体,我们需要一个BoxGeometry(立方体)对象
var geometry = new THREE.BoxGeometry(1, 1, 1);
//材质,来让它有颜色
var material = new THREE.MeshBasicMaterial({
color: 0x00ff00
});
//Mesh(网格)。 网格包含一个几何体以及作用在此几何体上的材质
cube = new THREE.Mesh(geometry, material);
scene.add(cube);
}
//“渲染循环”(render loop)或者“动画循环”(animate loop)
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
</script>
</body>
</html>
下一篇文章来实现 加载3D皮卡丘.obj模型,实现缩放、旋转等功能。
版权声明:本文标题:threeJs学习随笔(一),附百度网盘下载地址 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727903321a1137137.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论