Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

提交 a69476ef 编写于 作者: R rfm1201
浏览文件
操作

Add tuning to the web page 

The example web page now allows the change of different properties of
the circle's texture:
- wrapS
- wrapT
- offset
- repeat

The change on the js files are only formatting ones (mrdoobapproves)
上级 731cbaf1
隐藏空白更改
内联 并排
Showing with 276 addition and 203 deletion
examples/webgl_texture_raycast.html
浏览文件 @ a69476ef
......@@ -21,249 +21,295 @@
top: 0px; width: 100%;
padding: 5px;
}
#controls {
position: absolute;
text-align:left;
top: 40px;
left: 5px;
padding: 5px;
}
.control {
margin-bottom: 3px;
}
input {
width: 50px;
}
</style>
</head>
<body>
<div id="container"></div>
<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - texture intersection<br>Left to right: buffer geometry - geometry - indexed buffer geometry</div>
<!--<script src="../build/three.min.js"></script>-->
<script src="../build/three.js"></script>
<fieldset id="controls">
<legend>Circle</legend>
<div class="control">
WrapS : <select onchange="setwrapS(this)">
<option value="ClampToEdgeWrapping">ClampToEdgeWrapping</option>
<option value="RepeatWrapping">RepeatWrapping</option>
<option value="MirroredRepeatWrapping">MirroredRepeatWrapping</option>
</select>
</div>
<div class="control">
WrapT : <select onchange="setwrapT(this)">
<option value="ClampToEdgeWrapping">ClampToEdgeWrapping</option>
<option value="RepeatWrapping">RepeatWrapping</option>
<option value="MirroredRepeatWrapping">MirroredRepeatWrapping</option>
</select>
</div>
<div class="control">
Offset : X <input type="number" value="0" step="0.05" onchange="setOffsetU(this)" />
Y <input type="number" value="0" step="0.05" onchange="setOffsetV(this)" /><br />
</div>
<div class="control">
Repeat : X <input type="number" value="1" step="0.1" onchange="setRepeatU(this)" />
Y <input type="number" value="1" step="0.1" onchange="setRepeatV(this)" />
</div>
</fieldset>
<script src="../build/three.min.js"></script>
<script>
CanvasTexture = function(parentTexture) {
this._canvas = document.createElement("canvas");
this._context2D = this._canvas.getContext("2d");
CanvasTexture = function (parentTexture) {
this._canvas = document.createElement("canvas");
this._context2D = this._canvas.getContext("2d");
if (parentTexture) {
this._parentTexture.push(parentTexture);
parentTexture.image = this._canvas;
}
if (parentTexture) {
this._parentTexture.push(parentTexture);
parentTexture.image = this._canvas;
}
var that = this;
this._background = document.createElement("img");
this._background.addEventListener("load", function (event) {
that._canvas.width = that._background.naturalWidth;
that._canvas.height = that._background.naturalHeight;
that._rayonviseur = Math.ceil(Math.min(that._canvas.width, that._canvas.height / 30));
that._exterieurCroix = Math.ceil(0.70710678 * that._rayonviseur);
that._interieurCroix = Math.ceil(that._exterieurCroix / 10);
that._epaisseurViseur = Math.ceil(that._exterieurCroix / 10);
that._draw();
}, false);
this._background.crossOrigin = '';
this._background.src = "textures/UV_Grid_Sm.jpg";
var that = this;
this._background = document.createElement("img");
this._background.addEventListener("load", function (event) {
that._canvas.width = that._background.naturalWidth;
that._canvas.height = that._background.naturalHeight;
this._draw();
}
that._rayonviseur = Math.ceil(Math.min(that._canvas.width, that._canvas.height / 30));
that._exterieurCroix = Math.ceil(0.70710678 * that._rayonviseur);
that._interieurCroix = Math.ceil(that._exterieurCroix / 10);
that._epaisseurViseur = Math.ceil(that._exterieurCroix / 10);
that._draw();
}, false);
this._background.crossOrigin = '';
this._background.src = "textures/UV_Grid_Sm.jpg";
CanvasTexture.prototype = {
this._draw();
}
constructor: CanvasTexture,
_canvas: null,
_context2D: null,
_xCross: 0,
_yCross: 0,
_rayonviseur: 57,
_exterieurCroix: 40,
_interieurCroix: 4,
_epaisseurViseur: 4,
CanvasTexture.prototype = {
_parentTexture: [],
constructor: CanvasTexture,
addParent: function (parentTexture) {
if (this._parentTexture.indexOf(parentTexture) === -1) {
this._parentTexture.push(parentTexture);
parentTexture.image = this._canvas;
}
},
setCrossPosition: function (x, y) {
this._xCross = x * this._canvas.width;
this._yCross = y * this._canvas.height;
this._draw();
},
_draw: function () {
if (!this._context2D) return;
_canvas: null,
_context2D: null,
_xCross: 0,
_yCross: 0,
this._context2D.clearRect(0, 0, this._canvas.width, this._canvas.height)
_rayonviseur: 57,
_exterieurCroix: 40,
_interieurCroix: 4,
_epaisseurViseur: 4,
// Background.
this._context2D.drawImage(this._background, 0, 0);
_parentTexture: [],
// White cross.
this._context2D.lineWidth = this._epaisseurViseur * 3;
this._context2D.strokeStyle = "#FFFFFF";
addParent: function (parentTexture) {
if (this._parentTexture.indexOf(parentTexture) === -1) {
this._parentTexture.push(parentTexture);
parentTexture.image = this._canvas;
}
},
this._context2D.beginPath();
this._context2D.moveTo(this._xCross - this._exterieurCroix - 2, this._yCross - this._exterieurCroix -2);
this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross - this._interieurCroix);
setCrossPosition: function (x, y) {
this._xCross = x * this._canvas.width;
this._yCross = y * this._canvas.height;
this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross + this._interieurCroix);
this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross + this._exterieurCroix + 2);
this._draw();
},
_draw: function () {
if (!this._context2D) return;
this._context2D.moveTo(this._xCross - this._exterieurCroix - 2, this._yCross + this._exterieurCroix + 2);
this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross + this._interieurCroix);
this._context2D.clearRect(0, 0, this._canvas.width, this._canvas.height)
this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross - this._interieurCroix);
this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross - this._exterieurCroix - 2);
// Background.
this._context2D.drawImage(this._background, 0, 0);
this._context2D.stroke();
// Black cross.
this._context2D.lineWidth = this._epaisseurViseur;
this._context2D.strokeStyle = "#000000";
// Yellow cross.
this._context2D.lineWidth = this._epaisseurViseur * 3;
this._context2D.strokeStyle = "#FFFF00";
this._context2D.beginPath();
this._context2D.moveTo(this._xCross - this._exterieurCroix, this._yCross - this._exterieurCroix);
this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross - this._interieurCroix);
this._context2D.beginPath();
this._context2D.moveTo(this._xCross - this._exterieurCroix - 2, this._yCross - this._exterieurCroix - 2);
this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross - this._interieurCroix);
this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross + this._interieurCroix);
this._context2D.lineTo(this._xCross + this._exterieurCroix, this._yCross + this._exterieurCroix);
this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross + this._interieurCroix);
this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross + this._exterieurCroix + 2);
this._context2D.moveTo(this._xCross - this._exterieurCroix, this._yCross + this._exterieurCroix);
this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross + this._interieurCroix);
this._context2D.moveTo(this._xCross - this._exterieurCroix - 2, this._yCross + this._exterieurCroix + 2);
this._context2D.lineTo(this._xCross - this._interieurCroix, this._yCross + this._interieurCroix);
this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross - this._interieurCroix);
this._context2D.lineTo(this._xCross + this._exterieurCroix, this._yCross - this._exterieurCroix);
this._context2D.moveTo(this._xCross + this._interieurCroix, this._yCross - this._interieurCroix);
this._context2D.lineTo(this._xCross + this._exterieurCroix + 2, this._yCross - this._exterieurCroix - 2);
this._context2D.stroke();
for (var i = 0; i < this._parentTexture.length; i++) {
//this._parentTexture[i].image = this._canvas;
this._parentTexture[i].needsUpdate = true;
}
this._context2D.stroke();
for (var i = 0; i < this._parentTexture.length; i++) {
//this._parentTexture[i].image = this._canvas;
this._parentTexture[i].needsUpdate = true;
}
}
</script>
<script>
var container = document.getElementById("container");
var width = window.innerWidth;
var height = window.innerHeight ;
var objects = [];
}
</script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(scene.position);
var container = document.getElementById("container");
var width = window.innerWidth;
var height = window.innerHeight;
var objects = [];
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var onClickPosition = new THREE.Vector2();
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
camera.position.x = -30;
camera.position.y = 40;
camera.position.z = 50;
camera.lookAt(scene.position);
var getMousePosition = function (dom, x, y) {
var rect = dom.getBoundingClientRect();
return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];
};
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
var onClickPosition = new THREE.Vector2();
var getIntersects = function (point, objects) {
mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
var getMousePosition = function (dom, x, y) {
var rect = dom.getBoundingClientRect();
return [(x - rect.left) / rect.width, (y - rect.top) / rect.height];
};
raycaster.setFromCamera(mouse, camera);
var getIntersects = function (point, objects) {
mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
return raycaster.intersectObjects(objects);
};
raycaster.setFromCamera(mouse, camera);
window.addEventListener('resize', function(evt) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
return raycaster.intersectObjects(objects);
};
renderer.setSize( window.innerWidth, window.innerHeight );
}, false);
window.addEventListener('resize', function (evt) {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
container.addEventListener('click', function(evt) {
evt.preventDefault();
renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
var array = getMousePosition(container, evt.clientX, evt.clientY);
onClickPosition.fromArray(array);
container.addEventListener('click', function (evt) {
evt.preventDefault();
var intersects = getIntersects(onClickPosition, objects);
if (intersects.length > 0) {
if (intersects[0].uv) {
var uv = intersects[0].uv;
intersects[0].object.material.map.transformUv(uv);
canvas.setCrossPosition(uv.x, uv.y);
}
}
}, false);
var array = getMousePosition(container, evt.clientX, evt.clientY);
onClickPosition.fromArray(array);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
// A cube, in the middle.
var cubeTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
var canvas = new CanvasTexture(cubeTexture);
var cubeMaterial = new THREE.MeshBasicMaterial( { map: cubeTexture } );
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
// Set a specific texture mapping.
var uvs;
for (var i = 0; i < cubeGeometry.faceVertexUvs[0].length; i++) {
uvs = cubeGeometry.faceVertexUvs[0][i];
for (var j = 0; j < 3; j++) {
if (uvs[j].x < 0.1) uvs[j].x = -1;
if (uvs[j].y < 0.1) uvs[j].y = -1;
var intersects = getIntersects(onClickPosition, objects);
if (intersects.length > 0) {
if (intersects[0].uv) {
var uv = intersects[0].uv;
intersects[0].object.material.map.transformUv(uv);
canvas.setCrossPosition(uv.x, uv.y);
}
}
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 4;
cube.position.y = -5;
cube.position.z = 0;
objects.push(cube);
scene.add(cube);
// A plane on the left.
var planeTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.MirroredRepeatWrapping, THREE.MirroredRepeatWrapping);
canvas.addParent(planeTexture);
var planeMaterial = new THREE.MeshBasicMaterial( { map: planeTexture } );
var planeGeometry = new THREE.PlaneBufferGeometry(25, 25, 1, 1);
var uvs = planeGeometry.attributes.uv.array;
for (var i = 0; i < uvs.length; i++) {
//if (uvs[i] < 0.1) uvs[i] = -1;
uvs[i] *= 2;
}
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.x = -16;
plane.position.y = -5;
plane.position.z = 0;
objects.push(plane);
scene.add(plane);
// A circle on the left.
var circleTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.MirroredRepeatWrapping);
canvas.addParent(circleTexture);
var circleMaterial = new THREE.MeshBasicMaterial( { map: circleTexture } );
var circleGeometry = new THREE.CircleBufferGeometry(25, 40, 0, Math.PI * 2);
var uvs = circleGeometry.attributes.uv.array;
for (var i = 0; i < uvs.length; i++) {
uvs[i] *= 2;
}, false);
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
renderer.setSize(width, height);
container.appendChild(renderer.domElement);
// A cube, in the middle.
var cubeTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.RepeatWrapping, THREE.RepeatWrapping);
var canvas = new CanvasTexture(cubeTexture);
var cubeMaterial = new THREE.MeshBasicMaterial({ map: cubeTexture });
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
// Set a specific texture mapping.
var uvs;
for (var i = 0; i < cubeGeometry.faceVertexUvs[0].length; i++) {
uvs = cubeGeometry.faceVertexUvs[0][i];
for (var j = 0; j < 3; j++) {
if (uvs[j].x < 0.1) uvs[j].x = -1;
if (uvs[j].y < 0.1) uvs[j].y = -1;
}
var circle = new THREE.Mesh(circleGeometry, circleMaterial);
circle.position.x = 24;
circle.position.y = -5;
circle.position.z = 0;
objects.push(circle);
scene.add(circle);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
}
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.x = 4;
cube.position.y = -5;
cube.position.z = 0;
objects.push(cube);
scene.add(cube);
// A plane on the left.
var planeTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.MirroredRepeatWrapping, THREE.MirroredRepeatWrapping);
canvas.addParent(planeTexture);
var planeMaterial = new THREE.MeshBasicMaterial({ map: planeTexture });
var planeGeometry = new THREE.PlaneBufferGeometry(25, 25, 1, 1);
var uvs = planeGeometry.attributes.uv.array;
for (var i = 0; i < uvs.length; i++) {
//if (uvs[i] < 0.1) uvs[i] = -1;
uvs[i] *= 2;
}
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.position.x = -16;
plane.position.y = -5;
plane.position.z = 0;
objects.push(plane);
scene.add(plane);
// A circle on the left.
var circleTexture = new THREE.Texture(undefined, THREE.UVMapping, THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping);
canvas.addParent(circleTexture);
var circleMaterial = new THREE.MeshBasicMaterial({ map: circleTexture });
var circleGeometry = new THREE.CircleBufferGeometry(25, 40, 0, Math.PI * 2);
var uvs = circleGeometry.attributes.uv.array;
for (var i = 0; i < uvs.length; i++) {
uvs[i] = (uvs[i] - 0.25) * 2;
}
var circle = new THREE.Mesh(circleGeometry, circleMaterial);
circle.position.x = 24;
circle.position.y = -5;
circle.position.z = 0;
objects.push(circle);
scene.add(circle);
render();
function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
function setwrapS(that) {
circleTexture.wrapS = THREE[that.value];
circleTexture.needsUpdate = true;
};
function setwrapT(that) {
circleTexture.wrapT = THREE[that.value];
circleTexture.needsUpdate = true;
};
function setOffsetU(that) {
circleTexture.offset.x = parseFloat(that.value);
};
function setOffsetV(that) {
circleTexture.offset.y = parseFloat(that.value);
};
function setRepeatU(that) {
circleTexture.repeat.x = parseFloat(that.value);
};
function setRepeatV(that) {
circleTexture.repeat.y = parseFloat(that.value);
};
</script>
</body>
</html>
src/objects/Mesh.js
浏览文件 @ a69476ef
......@@ -173,7 +173,7 @@ THREE.Mesh.prototype.raycast = ( function () {
if ( intersectionPoint === null ) continue;
pInter.copy(intersectionPoint);
pInter.copy( intersectionPoint );
intersectionPoint.applyMatrix4( this.matrixWorld );
var distance = raycaster.ray.origin.distanceTo( intersectionPoint );
......@@ -229,7 +229,7 @@ THREE.Mesh.prototype.raycast = ( function () {
if ( intersectionPoint === null ) continue;
pInter.copy(intersectionPoint);
pInter.copy( intersectionPoint );
intersectionPoint.applyMatrix4( this.matrixWorld );
var distance = raycaster.ray.origin.distanceTo( intersectionPoint );
......@@ -331,7 +331,7 @@ THREE.Mesh.prototype.raycast = ( function () {
if ( intersectionPoint === null ) continue;
pInter.copy(intersectionPoint);
pInter.copy( intersectionPoint );
intersectionPoint.applyMatrix4( this.matrixWorld );
var distance = raycaster.ray.origin.distanceTo( intersectionPoint );
......
src/textures/Texture.js
浏览文件 @ a69476ef
......@@ -189,52 +189,79 @@ THREE.Texture.prototype = {
transformUv: function ( uv ) {
if ( this.mapping !== THREE.UVMapping ) {
return;
}
if ( this.mapping !== THREE.UVMapping ) return;
uv.multiply( this.repeat );
uv.add( this.offset );
if ( uv.x < 0 || uv.x > 1 ) {
switch ( this.wrapS ) {
case THREE.RepeatWrapping:
uv.x = uv.x - Math.floor( uv.x );
break;
case THREE.ClampToEdgeWrapping:
uv.x = uv.x < 0 ? 0 : 1;
break;
case THREE.MirroredRepeatWrapping:
if ( Math.abs(Math.floor( uv.x ) % 2) === 1 ) {
if ( Math.abs( Math.floor( uv.x ) % 2 ) === 1 ) {
uv.x = Math.ceil( uv.x ) - uv.x;
} else {
uv.x = uv.x - Math.floor( uv.x );
}
break;
break;
}
}
if ( uv.y < 0 || uv.y > 1 ) {
switch ( this.wrapT ) {
case THREE.RepeatWrapping:
uv.y = uv.y - Math.floor( uv.y );
break;
case THREE.ClampToEdgeWrapping:
uv.y = uv.y < 0 ? 0 : 1;
break;
case THREE.MirroredRepeatWrapping:
if ( Math.abs( Math.floor( uv.y ) % 2 ) === 1 ) {
uv.y = Math.ceil( uv.y ) - uv.y;
} else {
uv.y = uv.y - Math.floor( uv.y );
}
break;
}
}
if ( this.flipY ) {
uv.y = 1 - uv.y;
}
}
};
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或