Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

提交 a7b0bbb3 编写于 作者: L linbingquan
浏览文件
操作

Merge branch 'dev' of https://github.com/mrdoob/three.js into dev

上级 414f2a48 5310b072
展开全部 隐藏空白更改
内联 并排
Showing with 576 addition and 463 deletion
docs/api/en/math/Spherical.html
浏览文件 @ a7b0bbb3
......@@ -40,7 +40,7 @@
<h3>[method:Spherical clone]()</h3>
<p>
Returns a new plane with the same [page:.radius radius], [page:.phi phi]
Returns a new spherical with the same [page:.radius radius], [page:.phi phi]
and [page:.theta theta] properties as this one.
</p>
......
docs/api/en/objects/SkinnedMesh.html
浏览文件 @ a7b0bbb3
......@@ -128,7 +128,7 @@
<h3>[property:Skeleton skeleton]</h3>
<p>
[page:Skeleton] representing the bone hierachy of the skinned mesh.
[page:Skeleton] representing the bone hierarchy of the skinned mesh.
</p>
......
docs/api/zh/audio/Audio.html
浏览文件 @ a7b0bbb3
......@@ -63,7 +63,7 @@
<p>构造函数中传入[page:AudioListener listener]的[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext].</p>
<h3>[property:Number detune]</h3>
<p>TODO</p>
<p>修改音高，以音分为单位。 +/- 100为一个半音， +/- 1200为一个八度。默认值为0。</p>
<h3>[property:Array filters]</h3>
<p>表示[link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNodes]的数组. 可以使用多种不同的低阶filters去创建复杂的音效. filters可以通过 [page:Audio.setFilter] 或者 [page:Audio.setFilters]设置.</p>
......
docs/api/zh/math/Cylindrical.html
浏览文件 @ a7b0bbb3
......@@ -8,10 +8,10 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>圆柱体[name]</h1>
<h1>圆柱坐标（[name]）</h1>
<p class="desc">
A point's [link:https://en.wikipedia.org/wiki/Cylindrical_coordinate_system cylindrical coordinates].
一个点的[link:https://en.wikipedia.org/wiki/Cylindrical_coordinate_system cylindrical coordinates]（圆柱坐标）。
</p>
......@@ -39,12 +39,12 @@
<h3>[method:Cylindrical clone]()</h3>
<p>
返回一个与当前拥有相同 [page:.radius radius], [page:.theta theta] 和 [page:.y y] 属性的圆柱体。
返回一个与当前拥有相同 [page:.radius radius], [page:.theta theta] 和 [page:.y y] 属性的圆柱坐标。
</p>
<h3>[method:Cylindrical copy]( [param:Cylindrical other] )</h3>
<p>
将传入的圆柱体对象的 [page:.radius radius], [page:.theta theta] 和 [page:.y y] 属性赋给当前对象。
将传入的圆柱坐标对象的 [page:.radius radius], [page:.theta theta] 和 [page:.y y] 属性赋给当前对象。
</p>
<h3>[method:Cylindrical set]( [param:Float radius], [param:Float theta], [param:Float y] )</h3>
......@@ -53,15 +53,15 @@
<h3>[method:Cylindrical setFromVector3]( [param:Vector3 vec3] )</h3>
<p>
从 [page:Vector3 Vector3] 中取x,y,z,并调用setFromCartesianCoords来设置圆柱体的
从 [page:Vector3 Vector3] 中取x,y,z,并调用setFromCartesianCoords来设置圆柱坐标的
[page:.radius radius]、[page:.theta theta] 和 [page:.y y] 的属性值。
</p>
<h3>[method:Cylindrical setFromCartesianCoords]( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
使用笛卡尔坐标来设置该圆柱体的 [page:.radius radius], [page:.theta theta]
and [page:.y y] 属性值。
使用笛卡尔坐标来设置该圆柱坐标中 [page:.radius radius], [page:.theta theta]
以及 [page:.y y] 的属性值。
</p>
<h2>源码（Source）</h2>
......
docs/api/zh/math/Euler.html
浏览文件 @ a7b0bbb3
......@@ -8,7 +8,7 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<h1>欧拉角（[name]）</h1>
<p class="desc">
表示 [link:http://en.wikipedia.org/wiki/Euler_angles Euler] 的类。<br /><br />
......@@ -51,7 +51,7 @@
绕X轴旋转，然后是Y轴，最后是Z轴。其他可能性包括:
'YZX'， 'ZXY'， 'XZY'， 'YXZ'和'ZYX'。这些必须是大写字母。<br /><br />
Three.js 使用<em>intrinsic</em> Tait-Bryan angles（Yaw、Pitch、Roll）。
这意味着旋转是在<em>本地</em>坐标系下进行的。也就是说，对于“XYZ”订单，首先是围绕local-X轴旋转(与world- x轴相同)，
这意味着旋转是在<em>本地</em>坐标系下进行的。也就是说，对于“XYZ”顺序，首先是围绕local-X轴旋转(与world- x轴相同)，
然后是local-Y(现在可能与world y轴不同)，然后是local-Z(可能与world z轴不同)。<br /><br />
如果order值被改变，[page:.onChangeCallback onChangeCallback] 会被调用。
......
docs/api/zh/math/Spherical.html
浏览文件 @ a7b0bbb3
......@@ -8,18 +8,18 @@
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
<h1>[name]</h1>
<h1>球坐标（[name]）</h1>
<p class="desc">A point's [link:https://en.wikipedia.org/wiki/Spherical_coordinate_system spherical coordinates].</p>
<p class="desc">一个点的[link:https://en.wikipedia.org/wiki/Spherical_coordinate_system spherical coordinates]（球坐标）。</p>
<h2>Constructor</h2>
<h2>构造函数</h2>
<h3>[name]( [param:Float radius], [param:Float phi], [param:Float theta] )</h3>
<p>
[page:Float radius] - the radius, or the [link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]
(straight-line distance) from the point to the origin. Default is *1.0*.<br />
[page:Float radius] - 半径值，或者说从该点到原点的
[link:https://en.wikipedia.org/wiki/Euclidean_distance Euclidean distance]（欧几里得距离，即直线距离）。默认值为*1.0*。<br />
[page:Float phi] - polar angle from the y (up) axis. Default is *0*.<br />
[page:Float theta] - equator angle around the y (up) axis. Default is *0*.<br /><br />
......@@ -27,7 +27,7 @@
</p>
<h2>Properties</h2>
<h2>属性</h2>
<h3>[property:Float radius]</h3>
......@@ -36,42 +36,39 @@
<h3>[property:Float theta]</h3>
<h2>Methods</h2>
<h2>方法</h2>
<h3>[method:Spherical clone]()</h3>
<p>
Returns a new plane with the same [page:.radius radius], [page:.phi phi]
and [page:.theta theta] properties as this one.
返回一个新的球坐标，新的球坐标与该球坐标具有相同的
[page:.radius radius]、[page:.phi phi]和[page:.theta theta]。
</p>
<h3>[method:Spherical copy]( [param:Spherical s] )</h3>
<p>
Copies the values of the passed Spherical's [page:.radius radius], [page:.phi phi]
and [page:.theta theta] properties to this spherical.
复制所传入的球坐标的[page:.radius radius]、
[page:.phi phi] 和[page:.theta theta]属性到该球坐标中。
</p>
<h3>[method:Spherical makeSafe]()</h3>
<p>
Restricts the polar angle [page:.phi phi] to be between 0.000001 and pi - 0.000001.
将极角 [page:.phi phi] 的值限制在0.000001 和 pi - 0.000001 之间。
</p>
<h3>[method:Spherical set]( [param:Float radius], [param:Float phi], [param:Float theta] )</h3>
<p>Sets values of this spherical's [page:.radius radius], [page:.phi phi]
and [page:.theta theta] properties.</p>
<p>设置球坐标中[page:.radius radius]、[page:.phi phi] 和 [page:.theta theta] 属性的值。</p>
<h3>[method:Spherical setFromVector3]( [param:Vector3 vec3] )</h3>
<p>
Sets values of this spherical's [page:.radius radius], [page:.phi phi]
and [page:.theta theta] properties from the [page:Vector3 Vector3].
从[page:Vector3 Vector3]中设置球坐标的[page:.radius radius]、[page:.phi phi]和[page:.theta theta]值。
</p>
<h3>[method:Spherical setFromCartesianCoords]( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
Sets values of this spherical's [page:.radius radius], [page:.phi phi]
and [page:.theta theta] properties from Cartesian coordinates.
从笛卡尔坐标系中设置球坐标的[page:.radius radius]、[page:.phi phi]和[page:.theta theta]值。
</p>
<h2>Source</h2>
<h2>源代码</h2>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</body>
......
docs/api/zh/math/Vector2.html
浏览文件 @ a7b0bbb3
此差异已折叠。
docs/api/zh/math/Vector3.html
浏览文件 @ a7b0bbb3
此差异已折叠。
docs/api/zh/math/Vector4.html
浏览文件 @ a7b0bbb3
此差异已折叠。
docs/api/zh/objects/SkinnedMesh.html
浏览文件 @ a7b0bbb3
......@@ -91,8 +91,8 @@
<h2>构造器</h2>
<h3>[name]( [param:BufferGeometry geometry], [param:Material material] )</h3>
<p>
[page:BufferGeometry geometry] —— TODO<br />
[page:Material material] —— （可选）一个[page:Material]的实例，默认值是一个新的[page:MeshBasicMaterial]。
[page:BufferGeometry geometry] —— 一个[page:BufferGeometry]实例。<br />
[page:Material material] —— （可选）一个[page:Material]实例，默认值是一个新的[page:MeshBasicMaterial]。
</p>
......@@ -111,12 +111,12 @@
<h3>[property:Matrix4 bindMatrix]</h3>
<p>
用于绑定的骨骼变换的基础矩阵。
该基础矩阵用于绑定骨骼的变换。
</p>
<h3>[property:Matrix4 bindMatrixInverse]</h3>
<p>
用于重置绑定的骨骼变换的基础矩阵。
该基础矩阵用于重置绑定骨骼的变换。
</p>
<h3>[property:Boolean isSkinnedMesh]</h3>
......@@ -127,7 +127,7 @@
<h3>[property:Skeleton skeleton]</h3>
<p>
TODO
用于表示蒙皮网格中骨骼的层次结构的[page:Skeleton]（骨架）。
</p>
......@@ -138,7 +138,7 @@
<h3>[method:null bind]( [param:Skeleton skeleton], [param:Matrix4 bindMatrix] )</h3>
<p>
[page:Skeleton skeleton] —— 由一棵[page:Bone Bones]树创建的[page:Skeleton]。<br/>
[page:Matrix4 bindMatrix] —— 代表着骨架基本变换的[page:Matrix4]（4x4矩阵）。<br /><br />
[page:Matrix4 bindMatrix] —— 表示骨架基本变换的[page:Matrix4]（4x4矩阵）。<br /><br />
将骨架绑定到一个蒙皮网格上。bindMatrix会被保存到.bindMatrix属性中，其逆矩阵.bindMatrixInverse也会被计算出来。
</p>
......@@ -149,7 +149,7 @@
<h3>[method:null normalizeSkinWeights]()</h3>
<p>
TODO
标准化蒙皮的权重。
</p>
<h3>[method:null pose]()</h3>
......
docs/api/zh/scenes/Scene.html
浏览文件 @ a7b0bbb3
......@@ -56,7 +56,7 @@
<h3>[method:null dispose]()</h3>
<p>
TODO
清除[page:WebGLRenderer]内部所缓存的场景相关的数据。
</p>
<h2>源代码</h2>
......
docs/manual/zh/introduction/Useful-links.html
浏览文件 @ a7b0bbb3
......@@ -109,7 +109,7 @@
<h2>工具</h2>
<ul>
<li>
[link:http://www.physgl.org/ physgl.org] - javascript front-end with wrappers to three.js, to bring WebGL
[link:http://www.physgl.org/ physgl.org] - JavaScript front-end with wrappers to three.js, to bring WebGL
graphics to students learning physics and math.
</li>
<li>
......@@ -127,7 +127,7 @@
<h2>WebGL参考</h2>
<ul>
<li>
[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntex and definations.
[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntax and definitions.
</li>
</ul>
......
examples/models/svg/hexagon.svg 0 → 100644
浏览文件 @ a7b0bbb3
<svg id="color-fill" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="300" xmlns:xlink="http://www.w3.org/1999/xlink">
<polygon class="hex" points="300,150 225,280 75,280 0,150 75,20 225,20" fill="#ff0000"></polygon>
</svg>
examples/svg_sandbox.html
浏览文件 @ a7b0bbb3
......@@ -178,6 +178,23 @@
}
// CUSTOM FROM FILE
var fileLoader = new THREE.FileLoader();
fileLoader.load( 'models/svg/hexagon.svg', function ( svg ) {
var node = document.createElementNS( 'http://www.w3.org/2000/svg', 'g' );
var parser = new DOMParser();
var doc = parser.parseFromString( svg, 'image/svg+xml' );
node.appendChild( doc.documentElement );
var object = new THREE.SVGObject( node );
object.position.x = 500;
scene.add( object );
} );
// LIGHTS
var ambient = new THREE.AmbientLight( 0x80ffff );
......
examples/webgl_postprocessing_fxaa.html
浏览文件 @ a7b0bbb3
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - postprocessing - FXAA 3.11</title>
<meta charset="utf-8">
<title>three.js WebGL - postprocessing - FXAA</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
html, body {
height: 100%;
}
body {
color: #61443e;
font-family:Monospace;
font-size:13px;
text-align:center;
/* background-color: #bfd1e5; */
background-color: #ffffff;
margin: 0px;
background: #ffffff;
padding: 0;
margin: 0;
font-family: Monospace;
font-size: 13px;
overflow: hidden;
}
a { color: #a06851; }
#info {
top: 0px;
width: 100%;
color: #000000;
margin: 6px 0px;
text-align: center;
}
canvas {
margin: 20px;
margin-top: 40px;
#info a {
color: #000000;
}
#container {
width: 100%;
height: calc(100% - 80px);
}
</style>
</head>
<body>
<div id="info">
<p><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - FXAA example </p>
<p>original image (left) - FXAA 3.11 post-processing antialiasing (right)</p>
<p>Image source: <a href="https://github.com/mattdesl/glsl-fxaa" target="_blank" rel="noopener">glsl-fxaa by mattdesl</a></p>
</div>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - postprocessing - FXAA<br />
Left scene processed with FXAA, right scene is rendered without anti-aliasing.
</div>
<div id="container">
</div>
<div id="container"></div>
<script src="../build/three.js"></script>
<script src="js/WebGL.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="../build/three.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/shaders/FXAAShader.js"></script>
<script src="js/WebGL.js"></script>
<script>
( function closure() {
if ( WEBGL.isWebGLAvailable() === false ) {
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
}
var camera, scene, renderer, clock, group;
var composer1, composer2, fxaaPass;
init();
animate();
function init() {
var container = document.getElementById( 'container' );
camera = new THREE.PerspectiveCamera( 45, ( window.innerWidth * 0.5 ) / window.innerHeight, 1, 2000 );
camera.position.z = 500;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xffffff );
scene.fog = new THREE.Fog( 0xcccccc, 100, 1500 );
clock = new THREE.Clock();
//
var hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
hemiLight.position.set( 0, 1000, 0 );
scene.add( hemiLight );
var dirLight = new THREE.DirectionalLight( 0xffffff, 0.8 );
dirLight.position.set( - 3000, 1000, - 1000 );
scene.add( dirLight );
'use strict';
//
if ( WEBGL.isWebGLAvailable() === false ) {
group = new THREE.Group();
document.body.appendChild( WEBGL.getWebGLErrorMessage() );
var geometry = new THREE.TetrahedronBufferGeometry( 10 );
var material = new THREE.MeshStandardMaterial( { color: 0xee0808, flatShading: true } );
for ( var i = 0; i < 100; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = Math.random() * 500 - 250;
mesh.position.y = Math.random() * 500 - 250;
mesh.position.z = Math.random() * 500 - 250;
mesh.scale.setScalar( Math.random() * 2 + 1 );
mesh.rotation.x = Math.random() * Math.PI;
mesh.rotation.y = Math.random() * Math.PI;
mesh.rotation.z = Math.random() * Math.PI;
group.add( mesh );
}
var loader = new THREE.TextureLoader();
loader.load( "textures/fxaa_scene.png", function onLoad( texture ) {
scene.add( group );
//
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
//
var renderPass = new THREE.RenderPass( scene, camera );
//
fxaaPass = new THREE.ShaderPass( THREE.FXAAShader );
fxaaPass.renderToScreen = true;
var image = texture.image;
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
fxaaPass.material.uniforms[ "resolution" ].value.x = 1 / window.innerWidth;
fxaaPass.material.uniforms[ "resolution" ].value.y = 1 / window.innerHeight;
var fxaaMaterial = new THREE.ShaderMaterial( THREE.FXAAShader );
fxaaMaterial.uniforms[ "tDiffuse" ].value = texture;
fxaaMaterial.uniforms[ "resolution" ].value.x = 1 / image.naturalWidth;
fxaaMaterial.uniforms[ "resolution" ].value.y = 1 / image.naturalHeight;
composer1 = new THREE.EffectComposer( renderer );
composer1.addPass( renderPass );
composer1.addPass( fxaaPass );
var basicMaterial = new THREE.MeshBasicMaterial( { map: texture } );
//
var plane = new THREE.PlaneBufferGeometry( 1, 1 );
var copyPass = new THREE.ShaderPass( THREE.CopyShader );
copyPass.renderToScreen = true;
var quad1 = new THREE.Mesh( plane, basicMaterial );
var quad2 = new THREE.Mesh( plane, fxaaMaterial );
var scene1 = new THREE.Scene();
var scene2 = new THREE.Scene();
scene1.add( quad1 );
scene2.add( quad2 );
composer2 = new THREE.EffectComposer( renderer );
composer2.addPass( renderPass );
composer2.addPass( copyPass );
var camera = new THREE.OrthographicCamera( - 0.5, 0.5, 0.5, - 0.5, - 0.5, 0.5 );
//
var container = document.getElementById( 'container' );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = ( window.innerWidth * 0.5 ) / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer1.setSize( window.innerWidth, window.innerHeight );
composer2.setSize( window.innerWidth, window.innerHeight );
fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / window.innerWidth;
fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / window.innerHeight;
}
function animate() {
requestAnimationFrame( animate );
var renderer1 = new THREE.WebGLRenderer();
renderer1.setPixelRatio( window.devicePixelRatio );
renderer1.setSize( image.naturalWidth, image.naturalHeight );
container.appendChild( renderer1.domElement );
var halfWidth = window.innerWidth / 2;
var renderer2 = new THREE.WebGLRenderer();
renderer2.setPixelRatio( window.devicePixelRatio );
renderer2.setSize( image.naturalWidth, image.naturalHeight );
container.appendChild( renderer2.domElement );
group.rotation.y += clock.getDelta() * 0.1;
renderer1.render( scene1, camera );
renderer2.render( scene2, camera );
renderer.setViewport( 0, 0, halfWidth, window.innerHeight );
} );
composer1.render();
} )();
renderer.setViewport( halfWidth, 0, halfWidth, window.innerHeight );
composer2.render();
}
</script>
</body>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或