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
scenejs VS阅读Three js与他人[关闭]
oddy提出了一个问题:SceneJS vs Three.JS vs others [closed],或许与您遇到的问题类似。 回答者xeolabs给出了该问题的处理方式: As SceneJS author I thought I’d t...
2018-04-01
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
Three.js 发光粒子系统动画——利用HTML5画布绘制
用Three.js做了个字体的粒子系统动画,且自定义性极高,设置speedX=speedY=speedZ=1000的参数,截图如下: 预览地址:https://joeoeoe.github.io/Jon… 此文重讲思路,为方便解释,部分代...
2018-08-02
人脸实时签到(three.js+tracking.js)基于浏览器
人脸签到 花了一个星期做了人脸签到的demo,github地址欢迎star,在线预览大屏幕demo 先说些废话,以前做年会的抽奖,感觉好傻,现在正好在学threejs,就想做个这样的场景来抽奖的方式,又在学人脸识别的知识,就想做人脸识别签...
2018-07-09
How do you save an image from a Three.js canvas?
rjd提出了一个问题:How do you save an image from a Three.js canvas?,或许与您遇到的问题类似。 回答者CommunityDinesh Saravanan给出了该问题的处理方式: Since ...
2018-04-14
回到顶部