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

相关文章
Three.js and loading a cross-domain image
gmanKurt提出了一个问题:Three.js and loading a cross-domain image,或许与您遇到的问题类似。 回答者gman给出了该问题的处理方式: This works THREE.ImageUtils.c...
2018-04-20
随着阅读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
scenejs VS阅读Three js与他人[关闭]
oddy提出了一个问题:SceneJS vs Three.JS vs others [closed],或许与您遇到的问题类似。 回答者xeolabs给出了该问题的处理方式: As SceneJS author I thought I’d t...
2018-04-01
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使用的纹理
Ben MackAndrea提出了一个问题:Using textures in THREE.js,或许与您遇到的问题类似。 回答者meetarAndrea给出了该问题的处理方式: By the time the image is loade...
2018-03-25
Three.js 发光粒子系统动画——利用HTML5画布绘制
用Three.js做了个字体的粒子系统动画,且自定义性极高,设置speedX=speedY=speedZ=1000的参数,截图如下: 预览地址:https://joeoeoe.github.io/Jon… 此文重讲思路,为方便解释,部分代...
2018-08-02
Three.js Projector and Ray objects
gmanCory Gross提出了一个问题:Three.js Projector and Ray objects,或许与您遇到的问题类似。 回答者mrdoob给出了该问题的处理方式: Basically, you need to proje...
2018-04-13
Three.js detect webgl support and fallback to regular canvas
Juan Melladoeco_bach提出了一个问题:Three.js detect webgl support and fallback to regular canvas,或许与您遇到的问题类似。 回答者Juan Mellado给出了...
2018-04-12
回到顶部