three

2018-09-16 admin

three是什么

什么是three,JavaScript 3D library

three使用教程帮助文档

three.js

Latest NPM release License Dependencies Dev Dependencies Build Status Language Grade: JavaScript

JavaScript 3D library

The aim of the project is to create an easy to use, lightweight, 3D library. The library provides Canvas 2D, SVG, CSS3D and WebGL renderers.

ExamplesDocumentationWikiMigratingQuestionsForumGitterSlack

Usage

Download the minified library and include it in your HTML, or install and import it as a module, Alternatively see how to build the library yourself.

<script src="js/three.min.js"></script>

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
	camera.position.z = 1;

	scene = new THREE.Scene();

	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
	material = new THREE.MeshNormalMaterial();

	mesh = new THREE.Mesh( geometry, material );
	scene.add( mesh );

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

}

function animate() {

	requestAnimationFrame( animate );

	mesh.rotation.x += 0.01;
	mesh.rotation.y += 0.02;

	renderer.render( scene, camera );

}

If everything went well you should see this.

Change log

releases

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40417.html

文章标题:three

相关文章
How to rotate a 3D object on axis three.js?
CommunityTony Han提出了一个问题:How to rotate a 3D object on axis three.js?,或许与您遇到的问题类似。 回答者PeterCory Gross给出了该问题的处理方式: Here ar...
2018-04-17
JS基础-作用域、作用域链与闭包 Part three
1.作用域 执行上下文 (变量提前、函数声明提前、确定this值、arguments) 范围:一段&lt;script&gt;或者一个函数(都会生成一个执行上下文) 全局(一段&lt;script&gt;):变量定义、函数...
2018-05-17
随着阅读Three js透明背景
ZuulRobert Bue提出了一个问题:Transparent background with three.js,或许与您遇到的问题类似。 回答者WestLangley给出了该问题的处理方式: If you want a transpa...
2018-03-24
如何创建一个自定义阅读Three js的网?
gmanMaiaVictor提出了一个问题:How to create a custom mesh on THREE.JS?,或许与您遇到的问题类似。 回答者George Profenza给出了该问题的处理方式: You’ve added ...
2018-04-06
Add commas or spaces to group every three digits
Sophie Alpert提出了一个问题:Add commas or spaces to group every three digits,或许与您遇到的问题类似。 回答者Ghostoy给出了该问题的处理方式: Just split int...
2018-04-23
How to detect collision in three.js? [closed]
Shaun Wilsoneqiproo提出了一个问题:How to detect collision in three.js? [closed],或许与您遇到的问题类似。 回答者Lee Stemkoski给出了该问题的处理方式: In Th...
2018-04-15
scenejs VS阅读Three js与他人[关闭]
oddy提出了一个问题:SceneJS vs Three.JS vs others [closed],或许与您遇到的问题类似。 回答者xeolabs给出了该问题的处理方式: As SceneJS author I thought I’d t...
2018-04-01
Three.js 发光粒子系统动画——利用HTML5画布绘制
用Three.js做了个字体的粒子系统动画,且自定义性极高,设置speedX=speedY=speedZ=1000的参数,截图如下: 预览地址:https://joeoeoe.github.io/Jon… 此文重讲思路,为方便解释,部分代...
2018-08-02
在THREE.js使用的纹理
Ben MackAndrea提出了一个问题:Using textures in THREE.js,或许与您遇到的问题类似。 回答者meetarAndrea给出了该问题的处理方式: By the time the image is loade...
2018-03-25
Three.js Projector and Ray objects
gmanCory Gross提出了一个问题:Three.js Projector and Ray objects,或许与您遇到的问题类似。 回答者mrdoob给出了该问题的处理方式: Basically, you need to proje...
2018-04-13
回到顶部