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编写的一个项目类示例代码
WebVR 在开始之前,先对WebVR进行介绍,WebVR是一个实验性的Javascript API,允许HMD(head-mounted displays)连接到web apps,同时能够接受这些设备的位置和动作信息。这让使用Javasc...
2018-01-07
three-orbit-controls
three-orbit-controls是什么 什么是three-orbit-controls,orbit controls for ThreeJS three-orbit-controls官网:官网 three-orbit-contro...
2018-12-15
Three.js 选择拾取对象学习总结
Three.js 选择对象的本质是从点击位置发射光线,但屏幕坐标系与webgl坐标系是不同的,而把屏幕的二维坐标转化为三维坐标就是关键,做一步换算后交由Raycaster的setFromCamera方法即可。 所以思路如下: 1.获取屏幕坐...
2018-12-20
随着阅读Three js透明背景
ZuulRobert Bue提出了一个问题:Transparent background with three.js,或许与您遇到的问题类似。 回答者WestLangley给出了该问题的处理方式: If you want a transpa...
2018-03-24
Threejs教程之着色器
很多时候如果想写一些特效,往往需要编写着色器代码GLSL,如果你不熟悉着色器语言,自然需要学习着色器语言语法,如果你有着色器语言基础,直接使用Threejs引擎的ShaderMaterial或RawShaderMaterial API编写就...
2018-09-26
JS基础-作用域、作用域链与闭包 Part three
1.作用域 执行上下文 (变量提前、函数声明提前、确定this值、arguments) 范围:一段&lt;script&gt;或者一个函数(都会生成一个执行上下文) 全局(一段&lt;script&gt;):变量定义、函数...
2018-05-17
如何创建一个自定义阅读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
threeJs模块化开发解决方案 improt-three-examples
最近three的老项目要迁移到已有的vue后台中,但发现threeJs的插件npm的包真少,老项目中每引一个插件就得专门去修改文件中的import exports. So,干脆写了一个webpack插件使three-examples中的所有...
2019-01-03
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
回到顶部