Working on a project where on a button click script fetches a .svg and a .obj. Currently the button finds the .svg and the .obj but then spits out this error.
Uncaught TypeError: Cannot read property 'add' of undefined
Here is the code for the button, all other ThreeJS variables and calls are in the HTML and finish loading before the button is clicked.
function item(section, callback){
var tmp = itemName.split('-');
var cut = tmp[tmp.length-2];
var styleNo = tmp[tmp.length-1];
var path;
var model;
var loader = new THREE.OBJLoader( manager );
if (_product.svgPathAbsolute) {
path = itemName + '.svg';
model = styleCode + '.obj';
} else {
path = _product[section].svgPath + _product.name.toLowerCase() + '/' + cut.toLowerCase() + '/' + itemName + '.svg';
model = _product[section].svgPath + _product.name.toLowerCase() + '/' + cut.toLowerCase() + '/' + styleCode + '.obj';
}
loader.load( model, function ( object ) {
object.traverse(function(node){
if(node.material){
node.material.side = THREE.DoubleSide;
node.material = material;
}
});
object.position.y = -100;
geometry = object;
scene.add(geometry);
});
$.get(path, function (svg) {
_html[section] = svgToString(svg);
callback(section);
});
}
Included in HTML
<script>
var camera, scene, renderer, controls;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var geometry;
var material;
var svg = document.getElementById("svg-holder").querySelector("svg");
var img = document.createElement("img");
var canvas = document.createElement("canvas");
var svgSize = svg.getBoundingClientRect();
canvas.width = svgSize.width;
canvas.height = svgSize.height;
var ctx = canvas.getContext("2d");
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture;
var loader = new THREE.OBJLoader( manager );
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 150;
// scene
scene = new THREE.Scene();
var ambientLight = new THREE.AmbientLight( 0xFFFFFF, 0.9 );
scene.add( ambientLight );
var directLight = new THREE.DirectionalLight( 0xFFFFFF, 0.2 );
camera.add( directLight );
scene.add( camera );
controls = new THREE.OrbitControls( camera );
controls.addEventListener( 'change', render );
controls.minPolarAngle = 1.5;
controls.maxPolarAngle = 1.5;
var svgData = (new XMLSerializer()).serializeToString(svg);
img.setAttribute("src", "data:image/svg+xml;base64," + window.btoa(unescape(encodeURIComponent(svgData))) );
img.onload = function() {
ctx.drawImage(img, 0, 0);
var texture = new THREE.Texture(canvas);
texture.needsUpdate = true;
material = new THREE.MeshPhongMaterial({
map: texture
});
material.map.minFilter = THREE.LinearFilter;
};
renderer = new THREE.WebGLRenderer({canvas:garmentOBJ,antialias:true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
make the scene object global or bind it to window object like this: window.scene = scene.
Related
My requirement is to make a css3d rendering plane to be act as a floor. And a 3d cube should be on top of the plane. Following I have attached the code which I tried.Both plane and the cube shares the same scene and camera.But renders are different. But I couldn't place the 3d cube on top of the plane and rotation of the plane and cube are different.
<!DOCTYPE html>
<html lang="en">
<head>
<title>3JS CODE</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="js/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/libs/stats.min.js"></script>
<script>
var HtmlElement = function ( id, x, y, z, rx ) {
var div = document.createElement( 'div' );
div.innerHTML = "Hello";
div.id = id; //'googleMap';
div.style.width = '1200px';
div.style.height = '950px';
div.style.backgroundColor = 'blue';
var object = new THREE.CSS3DObject( div );
object.position.set( x, y, z );
object.rotation.x = rx;
return object;
};
</script>
<script>
var container, stats;
var camera, controls, mapScene, group, renderer1,renderer2;
var objects = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 5000 );
camera.position.z = 1000;
camera.position.set(0.18348775328760136, -334.5971567493426, 800.8398185862801);
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 3.0;
controls.zoomSpeed = 2.2;
controls.panSpeed = 2.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 1.3;
mapScene = new THREE.Scene();
// scene.background = new THREE.Color( 0xf0f0f0 );
group = new THREE.Group();
var mapObject = new HtmlElement( 'googleMap', 0, 0, 240, 270 );
group.add( mapObject );
///////////////
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
var hex = Math.random() * 0xffffff;
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );
}
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
cube = new THREE.Mesh( geometry, material );
cube.position.x = 0;
cube.position.y = -300;
cube.position.z = 500;
group.add( cube );
mapScene.add( group );
// renderer
renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.top = 0;
container.appendChild( renderer1.domElement );
renderer2 = new THREE.WebGLRenderer( { antialias: true } );
renderer2.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer2.domElement );
stats = new Stats();
container.appendChild( stats.dom );
window.addEventListener( 'resize', onWindowResize, false );
render();
// initMap();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer2.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
controls.update();
renderer1.render( mapScene, camera );
renderer2.render( mapScene, camera );
}
</script>
</body>
</html>
here's the output
THREE.CSS3DObject does not care about the depth buffer of the WebGLRenderingContext. It has no clue about the depth buffer or even depth test. The order of CSS objects can be defined by the z-index.
You try to mix two completely different technologies, which won't interact together in that way.
But you can still make it work.
For this you have to define the z-index of the CSS3DRenderer element lower then the z-index of the WebGLRenderer element so that the WebGLRenderer draws "in front of" the CSS3DRenderer. Further transparency has to be enabled for the WebGLRenderer:
renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.zIndex = 0;
renderer1.domElement.style.top = 0;
container.appendChild( renderer1.domElement );
renderer2 = new THREE.WebGLRenderer( { antialias: true, alpha:true } );
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.zIndex = 1;
renderer2.domElement.style.top = 0;
container.appendChild( renderer2.domElement );
Then you have to ensure that the WebGLRenderer takes care of the CSS3DObject. Technically this can't be done. But you can trick the system.
You can render a completely transparent plane, with equal size an at equal position, as the CSS3DObject in the WebGLRenderer:
var HtmlElement = function ( id, x, y, z, w, h ) {
var div = document.createElement( 'div' );
div.innerHTML = "Hello";
div.id = id; //'googleMap';
div.style.width = w + 'px';
div.style.height = h + 'px';
div.style.backgroundColor = 'blue';
var object = new THREE.CSS3DObject( div );
object.position.set( x, y, z );
return object;
};
var WebGlObject = function ( x, y, z, w, h ) {
var material = new THREE.MeshBasicMaterial({
color: 0x0000000,
opacity: 0.0,
side: THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(w, h);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
return mesh;
};
var mapObject = HtmlElement('googleMap', 0, 0, 0, 800, 800);
var planeMesh = WebGlObject( 0, 0, 0, 800, 800);
See the example, which is based on the code of your question:
var HtmlElement = function ( id, x, y, z, w, h ) {
var div = document.createElement( 'div' );
//div.innerHTML = "Hello";
div.id = id; //'googleMap';
div.style.width = w + 'px';
div.style.height = h + 'px';
div.style.backgroundColor = 'lightblue';
div.style.color = "red";
div.style.fontSize="200px";
div.style.textAlign="center";
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.google.com/maps/embed");
iframe.style.width = w + "px";
iframe.style.height = h + "px";
div.appendChild(iframe);
var object = new THREE.CSS3DObject( div );
object.position.set( x, y, z );
return object;
};
var WebGlObject = function ( x, y, z, w, h ) {
var material = new THREE.MeshBasicMaterial({
color: 0x0000000,
opacity: 0.0,
side: THREE.DoubleSide
});
var geometry = new THREE.PlaneGeometry(w, h);
var mesh = new THREE.Mesh(geometry, material);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
return mesh;
};
var container, stats;
var camera, controls, mapScene, group, renderer1,renderer2;
var objects = [];
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 5000 );
camera.position.set(-600, 300, 700);
controls = new THREE.TrackballControls( camera );
controls.rotateSpeed = 3.0;
controls.zoomSpeed = 2.2;
controls.panSpeed = 2.8;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 1.3;
mapScene = new THREE.Scene();
// scene.background = new THREE.Color( 0xf0f0f0 );
group = new THREE.Group();
group.renderOrder=1;
var mapObject = HtmlElement( 'googleMap', 0, 0, 0, 800, 800 );
var planeMesh = WebGlObject(0, 0, 0, 800, 800);
group.add( mapObject );
var geometry = new THREE.BoxGeometry( 200, 200, 200 );
for ( var i = 0; i < geometry.faces.length; i += 2 ) {
var hex = Math.random() * 0xffffff;
geometry.faces[ i ].color.setHex( hex );
geometry.faces[ i + 1 ].color.setHex( hex );
}
var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, overdraw: 0.5 } );
cube = new THREE.Mesh( geometry, material );
cube.position.x = 0;
cube.position.y = 0;
cube.position.z = 102;
group.add( cube );
group.add( planeMesh );
mapScene.add( group );
// renderer
renderer1 = new THREE.CSS3DRenderer();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer1.domElement.style.position = 'absolute';
renderer1.domElement.style.zIndex = 0;
renderer1.domElement.style.top = 0;
container.appendChild( renderer1.domElement );
renderer2 = new THREE.WebGLRenderer( { antialias: true, alpha:true } );
renderer2.setSize( window.innerWidth, window.innerHeight );
renderer2.domElement.style.position = 'absolute';
renderer2.domElement.style.zIndex = 1;
renderer2.domElement.style.top = 0;
container.appendChild( renderer2.domElement );
window.addEventListener( 'resize', onWindowResize, false );
render();
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer1.setSize( window.innerWidth, window.innerHeight );
renderer2.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
controls.update();
renderer2.render( mapScene, camera );
renderer1.render( mapScene, camera );
}
<script src="https://threejs.org/build/three.min.js"></script>
<!--script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/89/three.min.js"></script-->
<script src="https://threejs.org/examples/js/controls/TrackballControls.js"></script>
<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>
i would like to load a image in my 360 degree Scene but it dosen't work.
My Code:
<script>
var controls, camera, scene, renderer, element;
var container;
var sceneCube;
init();
animate();
function init() {
// CAMERAS
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
camera.position.set( 0, 0, 1000 );
cameraCube = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
//
renderer = new THREE.WebGLRenderer();
renderer.autoClear = false;
renderer.setSize( window.innerWidth, window.innerHeight );
element = renderer.domElement;
container = document.getElementById('webglviewer');
container.appendChild(element);
//
controls = new THREE.OrbitControls( camera, element );
controls.noPan = true;
controls.noZoom = true;
// SCENE
scene = new THREE.Scene();
sceneCube = new THREE.Scene();
// Textures
var r = "textures/cube/Bridge2/";
var urls = [ r + "face_4_2048.jpg", r + "face_2_2048.jpg",
r + "face_6_2048.jpg", r + "face_5_2048.jpg",
r + "face_1_2048.jpg", r + "face_3_2048.jpg" ];
textureCube = THREE.ImageUtils.loadTextureCube( urls );
textureCube.format = THREE.RGBFormat;
textureCube.mapping = THREE.CubeReflectionMapping;
// Materials
var cubeShader = THREE.ShaderLib[ "cube" ];
var cubeMaterial = new THREE.ShaderMaterial( {
fragmentShader: cubeShader.fragmentShader,
vertexShader: cubeShader.vertexShader,
uniforms: cubeShader.uniforms,
depthWrite: true,
side: THREE.BackSide
} );
cubeMaterial.uniforms[ "tCube" ].value = textureCube;
// Skybox
cubeMesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), cubeMaterial );
sceneCube.add( cubeMesh );
var materials = THREE.ImageUtils.loadTexture('badge.png');
myImg = new THREE.Mesh(
new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ),
new THREE.MeshFaceMaterial( materials ) );
sceneCube.add( myImg );
//INIT END
}
function onWindowResize() {
var width = container.offsetWidth;
var height = container.offsetHeight;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
cameraCube.aspect = window.innerWidth / window.innerHeight;
cameraCube.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
requestAnimationFrame( animate );
render();
controls.update();
}
function render() {
var timer = -0.0002 * Date.now();
camera.lookAt( scene.position );
cameraCube.rotation.copy( camera.rotation );
renderer.render( sceneCube, cameraCube );
renderer.render( scene, camera );
}
At this position:
var materials = THREE.ImageUtils.loadTexture('badge.png');
myImg = new THREE.Mesh(
new THREE.BoxGeometry( 562, 562, 562, 1, 1, 1 ),
new THREE.MeshFaceMaterial( materials ) );
sceneCube.add( myImg );
Got this error message:
three.min.js:538 Uncaught TypeError: Cannot read property 'visible' of undefined
Many thanks for help!
Your code and the version of three.js that you are using are not the same. Your code looks like it could be compatible with three.js version r72.
I am working on a small project where I am attempting to display NSF OpenTopography data in a point cloud visualization using three js. I have had success in plotting data that is pre-loaded, however I would like to read multiple data files via ajax and dynamically add points to the system as data is loaded. I am currently using BufferGeometry and BufferAttributes to generate the visualization.
Working example with pre-loaded data
http://jsfiddle.net/mcroteau/e6x73kad/
Current implementation with same data in multiple files
http://jsfiddle.net/mcroteau/22xvj97j/
var container, scene,
camera, renderer,
controls, stats,
geometry, material;
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45,
ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT,
NEAR = 0.1,
FAR = 20000;
var POINT_SIZE = 1,
PADDING = 20;
var BACKGROUND_COLOR = 0xefefef,
POINT_COLOR = 0x4466B0;
var COLOR_DIVISOR = 65025;
var maxX = maxY = maxZ = 0;
var minX = minY = minZ = 0;
var DATA_LENGTH = 896238;
var positions = new Float32Array( DATA_LENGTH * 3 );
var colors = new Float32Array( DATA_LENGTH * 3 );
var bufferPositions = new THREE.BufferAttribute( positions, 3 )
var bufferColors = new THREE.BufferAttribute( colors, 3 )
var NUMBER_FILES = 8;
var FILE_NAME = 'san-simeon';
var BASE_URL = 'http://104.237.155.7/jsfiddle/point-cloud1/data/output/';
function init() {
scene = new THREE.Scene();
container = document.createElement('div');
document.body.appendChild( container );
if ( Detector.webgl ){
renderer = new THREE.WebGLRenderer({ antialias: true });
}else{
renderer = new THREE.CanvasRenderer();
}
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
renderer.setClearColor( BACKGROUND_COLOR, 1);
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '0px';
stats.domElement.style.zIndex = 100;
container.appendChild( stats.domElement );
geometry = new THREE.BufferGeometry();
geometry.dynamic = true;
geometry.addAttribute( 'position', bufferPositions );
geometry.addAttribute( 'color', bufferColors );
loadDrawData();
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.x = 10;
camera.position.z = 50;
camera.position.y = 20;
scene.add(camera);
camera.lookAt(scene.position);
controls = new THREE.OrbitControls( camera, renderer.domElement );
material = new THREE.PointCloudMaterial({ size: POINT_SIZE, vertexColors: THREE.VertexColors });
particles = new THREE.PointCloud( geometry, material );
scene.add( particles );
window.addEventListener( 'resize', onWindowResize, false );
animate();
}
function loadDrawData(){
for(var m = 1; m < NUMBER_FILES; m++){
var file = FILE_NAME + '-' + m + '.csv'
var fileUrl = BASE_URL + FILE_NAME + '/' + file
console.log(fileUrl)
loadData(fileUrl).then(updateGeometryBuffers).then(recomputeGeometry).fail(failed)
}
}
function recomputeGeometry(){
console.info('recompute geometry')
geometry.attributes.position.needsUpdate = true
geometry.computeBoundingBox();
geometry.center();
}
function updateGeometryBuffers(csv){
var parsedData = csv.split(/\n/);
$(parsedData).each(function(index, row){
var data = row.split(',');
var x = data[1];
var y = data[2];
var z = data[0];
if(x && y && z){
positions[3 * index] = x
positions[3 * index + 1] = y;
positions[3 * index + 2] = z;
var red = data[3]
var green = data[4]
var blue = data[5]
red = red/COLOR_DIVISOR;
green = green/COLOR_DIVISOR;
blue = blue/COLOR_DIVISOR;
colors[3 * index] = red;
colors[3 * index + 1] = green;
colors[3 * index + 2] = blue;
}else{
console.warn('no data in row', index);
}
});
}
function loadData(url){
return $.ajax({
url : url,
dataType : 'text'
});
}
function failed(){
console.warn('failed to load data');
}
function onWindowResize() {
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
render();
update();
}
function update(){
controls.update();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
init();
In the current implementation, the geometry isn't re-centering which is one reason it isn't working. How do I force the geometry to re-center? What is the best way to dynamically add points to a three js point system?
Thanks in advance for any guidance provided.
I want to apply a texture on an object .
this is my code:
<html>
<head>
<title>My first Three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="OBJLoader.js"></script>
<script>
var container;
var camera, scene, renderer;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
camera.position.z = 100;
// scene
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 0, 1 );
scene.add( directionalLight );
// texture
var manager = new THREE.LoadingManager();
manager.onProgress = function ( item, loaded, total ) {
console.log( item, loaded, total );
};
var texture = new THREE.Texture();
var onProgress = function ( xhr ) {
if ( xhr.lengthComputable ) {
var percentComplete = xhr.loaded / xhr.total * 100;
console.log( Math.round(percentComplete, 2) + '% downloaded' );
}
};
var onError = function ( xhr ) {
};
var loader = new THREE.ImageLoader( manager );
loader.load( 'bb.jpg', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
// model
var loader = new THREE.OBJLoader( manager );
loader.load( 'note4.obj', function ( object ) {
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material.map = texture;
}
} );
object.position.y = - 80;
scene.add( object );
}, onProgress, onError );
//
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX ) / 2;
mouseY = ( event.clientY - windowHalfY ) / 2;
}
//
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );
renderer.render( scene, camera );
}
</script>
<div><canvas width="1360" height="150" style="width: 1360px; height: 150px;"></canvas></div>
</body>
</html>
All the js files ,texture and object file are in the same folder .
When I open the page, it gives me these errors . I tested it on firefox and chrome , firefox shows me these errors .
THREE.WebGLRenderer 69
THREE.WebGLRenderer: OES_texture_float extension not supported.
THREE.WebGLRenderer: OES_texture_float_linear extension not supported.
THREE.WebGLRenderer: OES_standard_derivatives extension not supported.
requestAnimationFrame is not defined
[Break On This Error] requestAnimationFrame( animate );
index.html (line 83)
bb.jpg 1 2
text is undefined
[Break On This Error] var lines = text.split( '\n' );
OBJLoader.js (line 195)
What am I doing wrong ?
Looking forward to hear from you
you're loading the textures with an image loader:
var loader = new THREE.ImageLoader( manager );
loader.load( 'bb.jpg', function ( image ) {
texture.image = image;
texture.needsUpdate = true;
} );
i've never worked with it because in most examples given textures are loaded in a different way:
var texture = THREE.ImageUtils.loadTexture('path/to/texture.png');
I currently have to do an animation with obj files. I want to rotate horizontally the loaded ribs. Is it just POSSIBLE to animate obj files ? If so, how do you do that ? I search all over the web, the only animation examples I found were made using JSONLoader, wich I don't use. Here is my code :
window.onload = function() {
var container, stats;
var camera, scene, renderer, object;
var windowHalfX;
var windowHalfY;
init();
animate();
function init() {
width = 500;
height = 500;
windowHalfX=width/2;
windowHalfY=height/2;
camera = new THREE.PerspectiveCamera( 45, width / height, 1, 2000 );
camera.position.z = 300;
scene = new THREE.Scene();
var ambient = new THREE.AmbientLight( 0x101030 );
scene.add( ambient );
var directionalLight = new THREE.DirectionalLight( 0xffeedd );
directionalLight.position.set( 0, 1, 1 );
scene.add( directionalLight );
var loader = new THREE.OBJMTLLoader();
for ( var i = 1; i < 13; i ++ ) {
var chem = './three/obj/Cotes/left/CG';
if (i<10) {
var nomcote = chem+'0'+i+'.obj';
var matcote = chem+'0'+i+'.mtl';
}
else{
var nomcote = chem+i+'.obj';
var matcote = chem+i+'.mtl';
}
loader.load( nomcote, matcote, function ( object ) {
object.position.y = - 70;
object.name = "cotesG"+i;
scene.add( object );
} );
}
for ( var i = 1; i < 13; i ++ ) {
var chem = './three/obj/Cotes/right/CD';
if (i<10) {
var nomcote = chem+'0'+i+'.obj';
var matcote = chem+'0'+i+'.mtl';
}
else{
var nomcote = chem+i+'.obj';
var matcote = chem+i+'.mtl';
}
loader.load( nomcote, matcote, function ( object ) {
object.position.y = - 70;
object.name = "cotesD"+i;
scene.add( object );
} );
}
renderer = new THREE.WebGLRenderer();
renderer.setSize( width, height );
controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.addEventListener( 'change', render );
document.body.appendChild( renderer.domElement );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = width / 2;
windowHalfY = height / 2;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize( width, height );
render();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
}
function render() {
// camera.lookAt( scene.position );
renderer.render( scene, camera );
}
}