three.js docs翻译
three.js docs翻译
ClassLibry 发表于9个月前
three.js docs翻译
  • 发表于 9个月前
  • 阅读 99
  • 收藏 0
  • 点赞 0
  • 评论 1

新睿云服务器60天免费使用,快来体验!>>>   

摘要: 水平有限,个人翻译,仅供参考。

原地址:three.js docs

创建一个场景(Creating a scene)

我们将要创建一个three.js项目。

开始之前

把下面把three.js的源代码考到你的电脑上,然后在主页里写下面这段代码。

注:截止到这篇文章发布之日时,three.js的源代码数量为43684行,注意粘贴的时候别少粘了。

<!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>
		<script src="js/three.js"></script>
		<script>
			// Our Javascript will go here.
		</script>
	</body>
</html>

就酱,下面代码都在空script标签里写。

创建场景

要在浏览器里边显示点啥玩意,必须要三样东西:场景,摄像机和渲染器。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

three.js有好多摄像机,现在我们使用透视摄像机,(至于什么是透视相机,为什么使用透视相机,除了透视相机还有什么其他相机,官网只字未提)第一个属性叫做视图区域。(75到底是个什么单位,怎么计算,它没说。。。)

第二个参数是一个比例,写上这玩意,你创建的那玩意在宽屏电脑上不至于被压瘪。

接下来两个参数是“近”“远”剪裁画板,摄像机太近或者太远都不会被渲染在画板上,(0.1、1000到底是个什么单位,什么概念它没说),我们还有更吊的东西还增强性能。(什么是更吊的东西它也没说)

再接下来是渲染器,这玩意挺神奇,除了WebGLRenderer,three.js还带来了一些其他的东西(a few others),其他的东西是什么呢?那句话实在是太长了,大意就是那些电脑差的、浏览器不支持webGL的用户也能用。

除了设置渲染器,我们还需要给我们的应用设置大小,一个比较好的办法就是设置宽高,比如浏览器宽高的一半setSize(window.innerWidth/2, window.innerHeight/2, false),这样它就能在你的浏览器里边显示的小一点。

最后,添加渲染器到HTML文档里,这样canvas元素就是把这个场景渲染给我们。

走你。

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

为了创建一个立方体,我们需要BoxGeometry,这个对象包含各个定点(vertices)和表面(faces),接下来我们会为它添加更多的东西。

除了几何关系,我们还为这个立方体加上了材质,所谓材质,其实就是颜色,three.js有很多材质,但是我们现在选择基本网状材质(MeshBasicMaterial),为了演示的简单一点,我们给它加上了0x00ff00,实际上就是绿色,使用它就跟CSS或者photoshop没什么区别。

默认的,我们写了scene.add()方法。

渲染场景

如果我们像上面那样写,我们啥也看不到,因为我们还没让渲染起作用,如果想要这样做的话,需要调用渲染循环(render loop)

function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
}
render();

这个渲染循环保证我们的渲染器每秒60次的绘制一次场景,如果你想写一个游戏,你可能会问:“为啥不写一个setInterval方法”,我们也可以这样做,但是请求动画框架requestAnimationFrame)有很多优势,其中最重要的一点是,如果你的用户想要暂停或者切换浏览器标签时,它(指的是使用setInterval方法)将浪费宝贵的处理能力和电池寿命。

接下来调用渲染器的渲染方法(renderer.render)在你的渲染(render)函数里。

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

我们给了一个酷毙的旋转动画,当然你也可以添加其他的方法。

结果

恭喜你,我们完成了第一个three.js应用,完整代码如下。

<html>
	<head>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

			var renderer = new THREE.WebGLRenderer();
			renderer.setSize( window.innerWidth, window.innerHeight );
			document.body.appendChild( renderer.domElement );

			var geometry = new THREE.BoxGeometry( 1, 1, 1 );
			var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
			var cube = new THREE.Mesh( geometry, material );
			scene.add( cube );

			camera.position.z = 5;

			var render = function () {
				requestAnimationFrame( render );

				cube.rotation.x += 0.1;
				cube.rotation.y += 0.1;

				renderer.render(scene, camera);
			};

			render();
		</script>
	</body>
</html>

最后说一点,我按照这个代码这样写了,结果也没出现那个旋转的绿色方块。这是我见过的最厉(dan)害(teng)的官方网站。

标签: Three.js
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 10
码字总数 13889
评论 (1)
SwatNo27
你没有指定camera的lookAt属性,所以没有方块
×
ClassLibry
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: