three.js 初步
three.js 初步
用户4793865
发布于 2023-01-12 14:43:48
发布于 2023-01-12 14:43:48
代码可运行
运行总次数：0
代码可运行
这是我参与8月更文挑战的第23天，活动详情查看:8月更文挑战
我也是个初学者，大家就当这是我的笔记看，如果理解不正确请大家指正。首先推荐大家一个学习网站Tress.js中文网。 首先我们需要先引入tree.js
链接:https://pan.baidu.com/s/1SLQL6RChecY8gE7e-Jfn1g
密码:n4h8<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
//根据文件的位置，我放在了跟html文件放到了js的统计目录
<script src="js/three.js"></script>
<script>
//我们主要渲染代码都写到这儿
</script>
</body>
</html>这张图很重要，或许现在不理解等，读上代码就知道了
我们先往下看。
创建一个场景，我们需要以下几个对象：场景、相机和渲染器
- 一个场景：把这个看做一个舞台，然后将所有需要的对象添加上去。
- 一个相机：在这个案例中我们创建一个透视摄像机，但它也可能是投影相机。也就是我们拍摄物体的位置。
- 一个渲染器：渲染器将会使用WebGL渲染场景中的所有的物体。
- 一个或多个物体：如图的飞机和圆柱都是物体。它们分别在各自的网格模型（Mesh）当中。mesh需要包含几何体参数(几何体形状)和材质(包括：颜色、贴图、透明度)等参数。
var mesh = new THREE.Mesh(geometry,material);- 一个或多个光源：可以使用不同样式的光源。 注意xyz轴哦，有助于理解。
如图：
我们读段代码看看：效果是一个旋转的正方体
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script type="text/javascript" src='../js/three.js'></script>
<title></title>
</head>
<body>
<script type="text/javascript">
// 场景
var scene = new THREE.Scene();
// 立方体 参数分别是长宽高
var geometry = new THREE.BoxGeometry(100,100,100);
//材质 MeshLambertMaterial
var material = new THREE.MeshLambertMaterial({
color : 0x0000ff
});
//网格 包括几何体和材质（颜色，材质，透明度）
var mesh = new THREE.Mesh(geometry,material);
//网格 添加到场景
scene.add(mesh);
//
var point = new THREE.PointLight(0xffffff);
point.position.set(400,200,300);
scene.add(point);
//
var ambient = new THREE.AmbientLight(0x444444);
console.log(scene);
// 屏幕的宽
var width = window.innerWidth;
// 屏幕的高
var height = window.innerHeight;
// 屏幕的宽高比
var k = width/height;
var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建一个相机，相机有多种。这里用的是OrthographicCamera
//参数 1--视野角度 2--长宽比根据屏幕长宽 3--远剪切面 4--近剪切面
var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,1,1000);
camera.position.set(200,300,200);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height);
renderer.setClearColor(0xb9d3ff,1);
document.body.appendChild(renderer.domElement);
function render(){
requestAnimationFrame(render);
renderer.render(scene,camera);
mesh.rotation.x +=0.1;
mesh.rotation.y +=0.2;
}
render();
</script>
</body>
</html>scene:场景，就像拍摄现场的密闭空间，装着演员和摄像机。场景里包含着网格模型，每一个网格模型里有一个几何体，而几何体是不能被渲染的，只有几何体和材质结合成网格才能被渲染到屏幕上。如下代码就是这个意思。
var mesh = new THREE.Mesh(geometry,material);再分别说一下几何体和材质： 几何体会有形状和尺寸属性，如下代码BoxGeometry是立方体，三个参数分别是长宽高，三个参数不相等就成了长方体了。
var geometry = new THREE.BoxGeometry(100,100,100);既然有立方体还有什么别的几何体呢？
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-08-24，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
