three.js 入门(threejs入门指南)

yumo6665小时前技术文章2

three.js和webGL

引用官方的说法:

three.js是使用WebGL来绘制三维效果的,three.js封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能,让你不必要再从底层WebGL开始写起。

所以学习three.js并不需要专门去学习webGL,当然有基础肯定是有帮助的。

官网说明

1.打开官网看到下图,右边是一些3d样例,对初学没什么用。

左边r130代表的版本号,这边建议大家去看的是文档说明(documentation)resources的第一个学习资源(Three.js Fundamentals),他们都有对应的中文翻译,讲得比较基础适合入门

three.js版本选择

1) three.js版本更新得很快,今天你下载了一个新版本,明天可能又更新了。很多旧版的方法在新版中被删除,一些方法的引用文件也有所改变,在网上搜索到的很多教程都是r6-r9版本,方法的使用看起来也是各异,学习起来挺混乱的。这里我使用r130版本(编写这边文章时候的最新版本)。各版本官方下载地址:
https://github.com/mrdoob/three.js/tags

2) 下载完之后解压得到three.js-master文件夹。这边将build里面的three.js拿出来,在自己项目做练习,examples里面有各种样例的代码包括了素材和对应的js依赖,之后可以拿来做练习(毕竟3d素材自己不好弄)。

开发工具

我使用的vscode ,安装live Server插件,可以跑本地服务,解决了图片等素材引用的跨域问题,当然你也可以直接使用官方的脚手架来练习。官方脚手架需要node环境,如果不了解的建议使用vscode。

五.第一个3d程序

这里我使用官网上的例子。先上全代码,附注释。可以运行下看效果。

<html>
<head>
    <meta charset="utf-8">
    <title>My first three.js app</title>
    <style>
        body {
            margin: 0;
            padding:0;
        }
    </style>
</head>

<body>
    <script src="js/three.js"></script>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

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

         camera.position.z = 5;
            const animate = function () {
                requestAnimationFrame(animate);
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
                renderer.render(scene, camera);
            };
            animate();
      
    </script>
</body>
</html>

1.创建了一个场景,也就是3d模型等展示的舞台。

const scene = new THREE.Scene();

2.创建一个相机,他拍到的地方就是我们看到的内容,这里创建的是透视相

第一个参数:是角度表示看到的范围,

第二个表示:长宽比,作用是展示的物体可以正常比例显示

三四参数表示:近截面(near)和远截面(far),当物体某些部分比摄像机的远截面远或者比近截面近的时候,该这些部分将不会被渲染到场景中。

const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000)

3.创建一个渲染器,将场景和相机放入,渲染画面,设置渲染范围,并添加到页面中

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

4.创建简单的3d模型

  	     // 创建一个正方体
        const geometry = new THREE.BoxGeometry();
        // 创建网格基础材质 可以理解为外表样子,材质有很多种,详细可以查文档
        const material = new THREE.MeshBasicMaterial({
            color: 0x00ff00
        });
        // 创建网格 将他们加入网格中在添加到场景,网格包含一个几何体以及作用在此几何体上的材质
        const cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

5.渲染

// 这边是将相机拉远了,便于观察。如下图所示
camera.position.z = 5;
// 添加动画,渲染
const animate = function () {
	requestAnimationFrame( animate );
   cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;
	renderer.render( scene, camera );
   };
	animate();

6.效果图


相关文章

纯干货:node.js入门教程以及中文学习资源大搜罗!

node.js是Javascript的一个运行环境,也就是对Google V8引擎进行封装。node.js优化了特殊用例,还提供替代性强的API。基于此,今天W3Cschool小师妹将为大家带来史上最...

JavaScript如何入门?(javascript怎么入门)

1, 建议阅读“javascript高级程序设计”第三版电子版。(我刚开始学习,我向表哥(软件工程师)说我想做前端,于是,他帮我买了这本书,好的书大家都会推荐,很容易在网上找到,也没有必要我说一定是这...

js基础学习(js零基础入门视频教程)

vscode运行js要在VSCode中运行JavaScript代码,你需要按照以下步骤操作:首先确保你已经安装了Node.js。如果没有安装,可以从官网(https://nodejs.org/)下载并...

JavaScript基础知识(一)JS入门(js基础教程)

一、JS入门(一)产生JavaScript是布兰登·艾奇(BrendanEich,1961年~),在1995年利用十天完成JavaScript设计。网景公司最初命名为LiveScript,后来在与Su...

javascript基础入门(javascript基础入门资料)

第1天,学习的是js最基本的东西(包括js的组成、数据类型、数据类型转换、NaN和isNaN、隐式类型转换、加减乘除以及取余、变量作用域、闭包简单的概念、命名规范、运算符和逻辑运算符、程序流程控制:...

JS入门基础知识(js基础知识总结笔记)

JS对象操作对象增删改查创建对象 let obj = {}新增属性 obj.a = 1修改属性 obj.a = 'a'查询属性 obj.a删除属性 delete obj.a其他操作ob...