【ThreeJS】基础教学创建一个立方体

因为看到ThingJS中的文章ThingJS和threejs的区别在哪？ThingJS是免费的么？-场景搭建-ThingJS 开发者社区讲THREE很难学，这是误导，其实是很简单的；

就拿他文章里的代码，全部注释一遍给大家参考吧；

<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - geometry - cube</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css">
</head><body><script type="module">// 引入three库import * as THREE from '../build/three.module.js';// 创建相机，场景，渲染器var camera, scene, renderer;// 创建网格var mesh;// 初始化init();// 帧动画animate();// 初始化函数function init() {// 创建相机实例 fov70，高宽比，远近裁剪camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);// 设置相机位置camera.position.z = 400;// 创建场景scene = new THREE.Scene();// 创建贴图var texture = new THREE.TextureLoader().load('textures/crate.gif');// 创建几何体 = Box几何体缓冲区 scale 200，200，200var geometry = new THREE.BoxBufferGeometry(200, 200, 200);// 创建材质 = 基础材质 贴图 = texturevar material = new THREE.MeshBasicMaterial({ map: texture });// 网格 = 几何体+材质mesh = new THREE.Mesh(geometry, material);// 场景中添加 网格模型scene.add(mesh);// 创建渲染器 开启抗锯齿renderer = new THREE.WebGLRenderer({ antialias: true });// 设置渲染器像素比 = window设备的像素比renderer.setPixelRatio(window.devicePixelRatio);// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);// html dom节点添加渲染器内容document.body.appendChild(renderer.domElement);// 添加窗口尺寸变化监听window.addEventListener('resize', onWindowResize, false);}// 窗口变化后执行的函数function onWindowResize() {// 相机纵横比重新设置camera.aspect = window.innerWidth / window.innerHeight;// 更新相机投影矩阵camera.updateProjectionMatrix();// 设置渲染器尺寸renderer.setSize(window.innerWidth, window.innerHeight);}// 设置帧动画函数function animate() {// 循环执行帧动画requestAnimationFrame(animate);// 旋转mesh x轴mesh.rotation.x += 0.005;// 旋转mesh y轴mesh.rotation.y += 0.01;// 执行帧渲染renderer.render(scene, camera);}</script>
</body></html>

看完了带注释和格式的代码是不是感觉So Easy！

【ThreeJS】基础教学创建一个立方体相关推荐

sandy引擎学习笔记：创建一个立方体
问题:如何利用sandy的类库去创建一个立方体呢? 首先,我们要先了解sandy类库的结构可以看到上面就官方网放出的类库表,有一些很容易理解,像sandy.events 这个和flash.event ...
python不能创建集合的有哪些_Python3基础 frozenset() 创建一个不可更改的集合
镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体. ------------------------------------- ...
vue结合php增删改查实例,从vue基础开始创建一个简单的增删改查的实例
1.安装vue-clicnpm install vue-cli -g --执行全局安装 2.创建一个webpack的基础项目:命令:vue init webpack myproject; 以下是项目 ...
【MATLAB基础】创建一个包含十名学生姓名学号和各学生六个科目成绩的结构体，并对成绩数据进行简单处理，并对十名学生按照成绩排序
程序解决问题描述: 首先创建一个包含十名学生姓名学号和各学生六个科目成绩的结构体,分别求出十名学生的总成绩和平均成绩,最后按照总成绩对十名学生进行排序,并在命令窗口依次打印出1-10名的学生的姓名. ...
思达报表工具Style Report基础教程—创建一个多数据块的联合（Union）、镜像（Mirror）...
教程视频:http://v.youku.com/v_show/id_XOTAwNzcyMjY0.html 一.创建一个多数据块的联合(Union) 1)通过点击'新建工作表'按钮,创建一个新的工作表 ...
思达报表工具Style Report基础教程—创建一个多数据块的联合Union、镜像Mirro
2019独角兽企业重金招聘Python工程师标准>>> 教程视频:http://v.youku.com/v_show/id_XOTAwNzcyMjY0.html 一.创建一个多数据块 ...
DirectX11 学习笔记3 - 创建一个立方体和轴
该方案将在进一步的程序面向对象. 独立的模型类.更像是一个框架. 其中以超过遇到了一个非常有趣的问题,.获得一晚.我读了好几遍,以找到其他的列子.必须放在某些功能Render里面实时更新,而不是仅仅 ...
Django 基础，创建一个Django,并成功在网页中运行
主要分为模型层(models).视图层(views).模板层.表单创建第一个项目的步骤创建项目在终端输入cd进入到要放置代码的文件夹回退文件夹cd .. 执行以下命令,就会自动创建项目和相 ...
.Net-ABP基础学习-创建一个能跑的后端项目
记录一个创建过程创建项目使用abp指令,-t -u 选择none那个,创建出来host项目(不会请参考官方文档 Domain创建实体实体继承Entity EFCore添加数据库上下文.依赖注入 ...

【ThreeJS】基础教学创建一个立方体

【ThreeJS】基础教学创建一个立方体相关推荐

最新文章

热门文章

【ThreeJS】基础教学 创建一个立方体

【ThreeJS】基础教学 创建一个立方体相关推荐

最新文章

热门文章

【ThreeJS】基础教学创建一个立方体

【ThreeJS】基础教学创建一个立方体相关推荐