Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 8d198002 编写于 作者: M Mr.doob
浏览文件
操作

* Fixed a bug in Ray.intersectObject: face.normal needs to be transformed... 

* Fixed a bug in Ray.intersectObject: face.normal needs to be transformed using matrixRotation otherwise rotated objects fail
* A bit nicer example
上级 9a62d117
展开全部 隐藏空白更改
内联 并排
Showing with 172 addition and 25 deletion
README.md
浏览文件 @ 8d198002
......@@ -160,7 +160,6 @@ For creating a customised version of the library, including the source files in
* Added `PointLight`
* `CanvasRenderer` and `SVGRenderer` basic lighting support (ColorStroke/ColorFill only)
* `Renderer` > `Projector`. `CanvasRenderer`, `SVGRenderer` and `DOMRenderer` do not extend anymore
* Interactivity base code (hdi folder). To be refactored... ([mindlapse](http://github.com/mindlapse))
* Added `computeCentroids` method to `Geometry`
......
build/Three.js
浏览文件 @ 8d198002
此差异已折叠。
build/ThreeDebug.js
浏览文件 @ 8d198002
此差异已折叠。
examples/camera_orthographic.html
浏览文件 @ 8d198002
......@@ -32,8 +32,16 @@
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - orthographic view';
container.appendChild( info );
camera = new THREE.Camera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.projectionMatrix = THREE.Matrix4.makeOrtho( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -2000, 1000 );
......
examples/geometry_cube.html
浏览文件 @ 8d198002
......@@ -50,16 +50,16 @@
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement('div');
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = 'Drag to spin the cube';
container.appendChild(info);
container.appendChild( info );
camera = new THREE.Camera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
camera.position.y = 150;
......
examples/interactive_spheres.html → examples/interactive_cubes.html
浏览文件 @ 8d198002
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>three.js - interactive - spheres</title>
<title>three.js - interactive - cubes</title>
<meta charset="utf-8">
<style type="text/css">
body {
......@@ -14,44 +14,7 @@
</head>
<body>
<script type="text/javascript" src="../src/Three.js"></script>
<script type="text/javascript" src="../src/core/Color.js"></script>
<script type="text/javascript" src="../src/core/Vector2.js"></script>
<script type="text/javascript" src="../src/core/Vector3.js"></script>
<script type="text/javascript" src="../src/core/Vector4.js"></script>
<script type="text/javascript" src="../src/core/Ray.js"></script>
<script type="text/javascript" src="../src/core/Rectangle.js"></script>
<script type="text/javascript" src="../src/core/Matrix3.js"></script>
<script type="text/javascript" src="../src/core/Matrix4.js"></script>
<script type="text/javascript" src="../src/core/Vertex.js"></script>
<script type="text/javascript" src="../src/core/Face3.js"></script>
<script type="text/javascript" src="../src/core/Face4.js"></script>
<script type="text/javascript" src="../src/core/UV.js"></script>
<script type="text/javascript" src="../src/core/Geometry.js"></script>
<script type="text/javascript" src="../src/cameras/Camera.js"></script>
<script type="text/javascript" src="../src/objects/Object3D.js"></script>
<script type="text/javascript" src="../src/objects/Line.js"></script>
<script type="text/javascript" src="../src/objects/Mesh.js"></script>
<script type="text/javascript" src="../src/objects/Particle.js"></script>
<script type="text/javascript" src="../src/lights/Light.js"></script>
<script type="text/javascript" src="../src/lights/AmbientLight.js"></script>
<script type="text/javascript" src="../src/lights/DirectionalLight.js"></script>
<script type="text/javascript" src="../src/materials/LineColorMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorFillMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshColorStrokeMaterial.js"></script>
<script type="text/javascript" src="../src/materials/MeshFaceMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleBitmapMaterial.js"></script>
<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
<script type="text/javascript" src="../src/scenes/Scene.js"></script>
<script type="text/javascript" src="../src/renderers/Projector.js"></script>
<script type="text/javascript" src="../src/renderers/CanvasRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/SVGRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/WebGLRenderer.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace3.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableFace4.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableParticle.js"></script>
<script type="text/javascript" src="../src/renderers/renderables/RenderableLine.js"></script>
<script type="text/javascript" src="../build/Three.js"></script>
<script type="text/javascript" src="geometry/primitives/Cube.js"></script>
<script type="text/javascript" src="geometry/primitives/Sphere.js"></script>
......@@ -60,14 +23,8 @@
<script type="text/javascript">
var container;
var stats;
var camera;
var scene;
var renderer;
var cube, plane;
var container, stats;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0, projector;
......@@ -79,41 +36,41 @@
function init() {
container = document.createElement('div');
document.body.appendChild(container);
container = document.createElement( 'div' );
document.body.appendChild( container );
var info = document.createElement( 'div' );
info.style.position = 'absolute';
info.style.top = '10px';
info.style.width = '100%';
info.style.textAlign = 'center';
info.innerHTML = '<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - clickable objects';
container.appendChild( info );
camera = new THREE.Camera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.y = 300;
camera.position.z = 500;
camera.target.position.y = 150;
scene = new THREE.Scene();
geometry = new Cube( 200, 200, 200 );
for (var i = 0, l = geometry.faces.length; i < l; i++) {
geometry.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.8 ) ];
var geometry = new Cube( 100, 100, 100 );
}
cube = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );
cube.position.y = 150;
scene.addObject(cube);
geometry2 = new Sphere( 100, 20, 20 );
for ( var i = 0; i < 10; i ++ ) {
for (var i = 0, l = geometry2.faces.length; i < l; i++) {
geometry2.faces[i].material = [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.8 ) ];
var object = new THREE.Mesh( geometry, [ new THREE.MeshColorFillMaterial( Math.random() * 0xffffff, 0.5 ), new THREE.MeshColorStrokeMaterial( 0xffffff, 0.5 ) ] );
object.position.x = Math.random() * 800 - 400;
object.position.y = Math.random() * 800 - 400;
object.position.z = Math.random() * 800 - 400;
object.scale.x = Math.random() * 2 + 1;
object.scale.y = Math.random() * 2 + 1;
object.scale.z = Math.random() * 2 + 1;
object.rotation.x = ( Math.random() * 360 ) * Math.PI / 180;
object.rotation.y = ( Math.random() * 360 ) * Math.PI / 180;
object.rotation.z = ( Math.random() * 360 ) * Math.PI / 180;
scene.addObject( object );
}
cube2 = new THREE.Mesh( geometry2, new THREE.MeshFaceMaterial() );
cube2.position.y = 150;
cube2.position.z = 300;
scene.addObject(cube2);
projector = new THREE.Projector();
renderer = new THREE.CanvasRenderer();
......@@ -139,22 +96,25 @@
var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
/*
var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0xff0000 ) );
particle.position = vector;
var intersects = ray.intersectScene( scene );
scene.addObject( particle );
*/
if ( intersects.length > 0 ) {
var intersects = ray.intersectScene( scene );
intersects.length && intersects[ 0 ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
intersects.length && intersects[ 0 ].object.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
var particle = new THREE.Particle( new THREE.ParticleCircleMaterial( 0x000000 ) );
particle.position = intersects[ 0 ].point;
particle.scale.x = particle.scale.y = 8;
scene.addObject( particle );
}
/*
// Parse all the faces
for ( var i in intersects ) {
intersects[ i ].face.material[ 0 ].color.setHex( Math.random() * 0xffffff | 0x80000000 );
}
*/
}
......
src/core/Ray.js
浏览文件 @ 8d198002
......@@ -37,10 +37,11 @@ THREE.Ray.prototype = {
intersectObject: function ( object ) {
var f, fl, face, a, b, c, d, dot, s,
var f, fl, face, a, b, c, d, normal,
dot, scalar,
origin, direction,
geometry = object.geometry,
matrix = object.matrix,
vertices = geometry.vertices,
intersect, intersects = [],
intersectPoint;
......@@ -48,21 +49,21 @@ THREE.Ray.prototype = {
face = geometry.faces[ f ];
// if ( !face.selectable ) continue;
a = matrix.transform( geometry.vertices[ face.a ].position.clone() );
b = matrix.transform( geometry.vertices[ face.b ].position.clone() );
c = matrix.transform( geometry.vertices[ face.c ].position.clone() );
d = face instanceof THREE.Face4 ? matrix.transform( geometry.vertices[ face.d ].position.clone() ) : null;
origin = this.origin.clone();
direction = this.direction.clone();
dot = face.normal.dot( direction );
a = object.matrix.transform( vertices[ face.a ].position.clone() );
b = object.matrix.transform( vertices[ face.b ].position.clone() );
c = object.matrix.transform( vertices[ face.c ].position.clone() );
d = face instanceof THREE.Face4 ? object.matrix.transform( vertices[ face.d ].position.clone() ) : null;
normal = object.matrixRotation.transform( face.normal.clone() );
dot = direction.dot( normal );
if ( dot < 0 ) { // Math.abs( dot ) > 0.0001
s = face.normal.dot( new THREE.Vector3().sub( a, origin ) ) / dot;
intersectPoint = origin.addSelf( direction.multiplyScalar( s ) );
scalar = normal.dot( new THREE.Vector3().sub( a, origin ) ) / dot;
intersectPoint = origin.addSelf( direction.multiplyScalar( scalar ) );
if ( face instanceof THREE.Face3 ) {
......@@ -101,13 +102,13 @@ THREE.Ray.prototype = {
}
}
}
return intersects;
// http://www.blackpawn.com/texts/pointinpoly/default.html
function pointInFace3( p, a, b, c ) {
var v0 = c.clone().subSelf( a ), v1 = b.clone().subSelf( a ), v2 = p.clone().subSelf( a ),
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或