Three.js下载

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Three.js下载相关的知识，希望对你有一定的参考价值。

谁有下载好的Three.js。分享给我可以吗，或者可以试试这个网址https://github.com/mrdoob/three.js
我不知道为什么，总是下载到一半停掉，无法下载，官网上面也是同样的状态，下载不了。哪位大神可以下载或者有下载好的，跪求资源

参考技术A

链接：https://pan.baidu.com/s/10J850p6BY4FkpZqtM7s1EA

 密码：euuy

js文件应该是在build文件夹下

本回答被提问者采纳

Three.js 学习之路

1.一个友好的编辑器可以提高工作效率，webstrom,vscode是开发three.js的不错选择。

2.快速学习Three.js，可以从官网https://threejs.org/ 下载源码，查阅常用API，关注threejs分享案例。中文手册http://techbrood.com/threejs/docs/

3.快速构建一个通用的Three.js框架：

　　首先引入下载的three.js源文件到我们的项目中,接着创建必须的三个对象

（1）.scence ：存放所有3d场景中的对象，可通过scence.children快速拿到所有场景对象的信息（基于对象命名的索引，So命名规范极其重要）；

（2）.camera：摄像机包括透视摄像机（正交摄像机，立方体摄像机）；

　　　　屏幕中心为世界三维坐标系原点，屏幕向外为Z，屏幕右方为X，屏幕上方为Y
（3）.renderer:渲染器包括webgl和canvas，canvas是2d渲染的回退。通过渲染器把摄像机视口渲染到我们的网页中;

　　现在我们需要添加一个简单的3d模型，光源和一个render（）实时渲染函数，一个3D Web Demo就可以完美运行了。

示例:

<!DOCTYPE html>
<html>
<head>
<title>My first three.js 框架</title>
<script src="./lib/three.js"></script>
<style type="text/css">
body {
margin: 0px;
border: none;
cursor: pointer;
width: 100%;
height: 100vh;/* //800px */
overflow: hidden;
}
</style>
<script>
var renderer,scene,camera,cube;
function Init(){
scene= new THREE.Scene();

renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);//可自定义画布大小
renderer.setClearColor(0x000000, 1.0);//设置画布背景色
document.body.appendChild(renderer.domElement);//画布
 
camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);//透视相机
camera.position.set(0,4,10);
camera.up = { x: 0, y: 1, z: 0 };//自身up向量的朝向
camera.lookAt({ x: 0, y: 0, z: 0 });//聚焦
 
var pointlight = new THREE.PointLight(0xffffff);
pointlight.position.set(0, 0, 0);
scene.add(pointlight);

var cubegeometry = new THREE.BoxGeometry(1, 1, 1);//保存顶点数据
var cubematerial = new THREE.MeshBasicMaterial({color:0x00ff00});//材质对象
cube = new THREE.Mesh(cubegeometry, cubematerial);//网格对象
cube.rotation.x = 1.57;
scene.add(cube);
}
function update() {
cube.rotation.y += 0.05;//弧度 自身旋转 但自身轴向不变
renderer.render(scene, camera);//每一帧的渲染
requestAnimationFrame(update);//下一帧执行一次参数中的函数
}
function start(){
Init();
update();
}
 
</script>
</head>
<body onload="start()">
</body>
</html>



以上是关于Three.js下载的主要内容，如果未能解决你的问题，请参考以下文章

THREE.js

用three.js在网页实现3D模型

谁有three.js的loader扩展包下载地址 或者给我发一下 谢谢 我需要objmtlload

THREE.js 学习笔记

Vue与Three.js结合

webGl之three.js学习笔记