1.I want to combine the geometry,what should i do ?
By using position? And i even want to let the group of geometry move in the scene together what should i do? By using add()?For example: the group of demond
Why my triangle failed to draw?
my code:
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new THREE.OrbitControls( camera );
// ambient
scene.add( new THREE.AmbientLight( 0x00ffff ) );
// light
var light = new THREE.DirectionalLight( 0x00ffff, 1 );
light.position.set(10, 10, 0 );
//scene.add( light );
// axes
scene.add( new THREE.AxisHelper( 20 ) );
var verticesOfTriangle1 = new THREE.Vector3(1,0,0);
var verticesOfTriangle2 = new THREE.Vector3(0,0,0.3);
var verticesOfTriangle3 = new THREE.Vector3(0,0,-0.3);
var geometry = new THREE.Triangle(verticesOfTriangle1, verticesOfTriangle2, verticesOfTriangle3);
// material
var material = new THREE.MeshPhongMaterial( {
color: 0x00ffff,
shading: THREE.FlatShading,
transparent: true,
opacity: 0.7,
} );
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
the message from chrome:The error message
Use THREE.Group() to combine objects and move them together.
You can use THREE.ShapeGeometry() to create a triangle. To create a mesh your geometry should inherit properties of THREE.Geometry(). Look into geometries of threejs documentation for default geometries supported.
Related
I'm trying to learn something new in three.js. My goal is to be able to use what a second camera sees in a separate scene as a texture for the main scene.
Or alternatively to be able to use what a second camera sees in the main scene as a texture. But i only see a black screen. I posted my code for it here. I hope someone recognizes where my mistake is, because I just can't figure it out.
In 3 steps:
texture = second camera view
material use texture
apply material ordinary to a mesh
see below
var camera, controls, scene, renderer, container, aspect;
function main() {
init();
animate();
}
function init() {
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
container = document.getElementById('container');
renderer.setSize(container.clientWidth, container.clientHeight);
container.appendChild( renderer.domElement );
aspect = container.clientWidth / container.clientHeight;
scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
camera = new THREE.PerspectiveCamera( 60, container.clientWidth / container.clientHeight, 1, 1000000 );
camera.position.set(0, 0, 200);
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = true;
controls.enabled = true;
controls.target.set(0, 0, 0);
//-----End three basic setups-----
var tex = generateTexture(renderer);
var plane = new THREE.Mesh(
new THREE.PlaneBufferGeometry(100.0, 100.0),
new THREE.MeshBasicMaterial({
color: 0x00caff,
map: tex,
side: THREE.DoubleSide,
})
);
scene.add(plane);
}//-------End init----------
function animate() {
requestAnimationFrame( animate );
render();
}//-------End animate----------
function render() {
camera.updateMatrixWorld();
camera.updateProjectionMatrix();
renderer.render(scene, camera);
}//-------End render----------
function generateTexture(renderer) {
var resolution = 2000;
var textureScene = new THREE.Scene();
textureScene.background = new THREE.Color(0x404040);
var renderTarget = new THREE.WebGLRenderTarget(resolution, resolution, {minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat});
var textureCamera = new THREE.PerspectiveCamera(60, aspect, 0.1, 100000.0);
textureCamera.position.set(0, 0, 200);
textureCamera.lookAt(0, 0, 0);
var geometry = new THREE.SphereGeometry( 60, 32, 16 );
var material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
var sphere = new THREE.Mesh( geometry, material);
textureScene.add( sphere );
//---changes---
renderer.setRenderTarget( renderTarget );
renderer.clear();
renderer.render( textureScene, textureCamera );
renderer.setRenderTarget(null);
return renderTarget.texture;
//-------------
//---now it works fine---:)
}//----- End generateTexture ------
Are you copying this approach from a tutorial? What version of three.js are you using? I'm asking because you're using renderer.render(scene, camera, target, true); but the docs state that .render() only accepts two arguments, so passing a renderTarget doesn't do anything.
I recommend you copy the approach in this demo, you can see the source code by clicking on the < > icon. The essential part is as follows:
// Render first scene into texture
renderer.setRenderTarget( renderTarget );
renderer.clear();
renderer.render( textureScene, textureCamera );
// Render full scene to canvas
renderer.setRenderTarget( null );
renderer.clear();
renderer.render( scene, camera );
I am trying to make an 3d sphere, which holds some object on surface. I am new to using three js.
Any help, Below is my code for creating sphere.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
//controls = new THREE.OrbitControls( camera, renderer.domElement );
const sphere = new THREE.SphereBufferGeometry();
var geometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
var material = new THREE.MeshBasicMaterial( {color: '#7bb2ed', wireframe:true} );
var earthmesh = new THREE.Mesh(geometry, material);
// scene.add(earthmesh);
camera.position.z = 10;
const animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
For your use case, I would start from the (awesome) demo here --from mrdoob-- and the corresponding code on GitHub here.
Note the "SPHERE" button at the bottom of the demo.
I have a camera
if (srims.state.staticData.cameraSettings.active) {
srims.camera = new THREE.PerspectiveCamera(
srims.state.staticData.cameraSettings.distance,
(window.innerWidth * 0.75) / window.innerHeight,
srims.state.staticData.cameraSettings.minDistance,
srims.state.staticData.cameraSettings.maxDistance
);
srims.camera.position.set(
srims.state.staticData.cameraSettings.position.x,
srims.state.staticData.cameraSettings.position.y,
srims.state.staticData.cameraSettings.position.z
);
srims.camera.up = new THREE.Vector3(0, 1, 0);
srims.camera.lookAt(new THREE.Vector3(0, 0, 0));
}
It works great, basically looks at 0, 0, 0 and i can orbit / zoom all the way around that target.
Let's say my scene has a floor placed on Y: 0 and we have a model on that floor and the model is 0, 0, 0.
Now the problem is, I don't want to see or go under the floor with my camera I want it to stay above Y.
Best example would be that the bounds of my camera are like a cut in half tennis ball placed on the floor. It's only above the floor, not a full ball translated half above and half below the floor.
Any examples or guidance would be great.
You can do this by setting OrbitControls.maxPolarAngle to Math.PI * 0.5.
var mesh, renderer, scene, camera, controls;
init();
animate();
function init() {
// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
document.body.appendChild( renderer.domElement );
// scene
scene = new THREE.Scene();
// camera
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set( 20, 20, 20 );
// controls
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
// ambient
scene.add( new THREE.AmbientLight( 0x222222 ) );
// light
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set( 20,20, 0 );
scene.add( light );
// axes
scene.add( new THREE.AxesHelper( 20 ) );
// geometry
var geometry = new THREE.SphereGeometry( 5, 12, 8 );
// material
var material = new THREE.MeshPhongMaterial( {
color: 0x00ffff,
flatShading: true,
transparent: true,
opacity: 0.7,
} );
// mesh
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
<script src="https://rawcdn.githack.com/mrdoob/three.js/r112/build/three.js"></script>
<script src="https://rawcdn.githack.com/mrdoob/three.js/r112/examples/js/controls/OrbitControls.js"></script>
I have a mesh, created in blender and exported to .obj. The mesh looks valid and has UV map applied and exported into the same .obj as well. For some reason, when I try to apply a texture material, or even basic material to the mesh, only half of the hexagon is actually painted.
This is a mesh
This is the code
var container;
var camera, scene, renderer;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 0.5, 3000000 );
camera.position.set( 2000, 750, 2000 );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.userPan = false;
controls.userPanSpeed = 0.0;
controls.maxDistance = 5000.0;
controls.maxPolarAngle = Math.PI * 0.495;
controls.center.set( 0, 1, 0 );
var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
light.position.set( - 1, 1, - 1 );
scene.add( light );
waterNormals = new THREE.ImageUtils.loadTexture( 'textures/waternormals.jpg' );
waterNormals.wrapS = waterNormals.wrapT = THREE.RepeatWrapping;
water = new THREE.Water( renderer, camera, scene, {
textureWidth: 512,
textureHeight: 512,
waterNormals: waterNormals,
alpha: 1.0,
sunDirection: light.position.clone().normalize(),
sunColor: 0xffffff,
waterColor: 0x001e0f,
distortionScale: 50.0,
} );
var loader = new THREE.OBJMTLLoader();
loader.load( "models/world.obj", "models/world.mtl", function(object)
{
console.log(object.children[0].children[1].geometry);
var mesh = new THREE.Mesh(
object.children[0].children[1].geometry,
new THREE.MeshBasicMaterial
);
scene.add(mesh);
});
}
function animate() {
requestAnimationFrame( animate );
render();
}
function render() {
controls.update();
renderer.render( scene, camera );
}
And this is how it looks:
When I split the hexagons into 2 quads it works perfectly, thing is, I need faces to stay hexagons for picking, the faces I want to be selected are hexagons.
I'm trying add subdivisions to a sphere like this:
http://stemkoski.github.com/Three.js/Subdivision-Cube.html
Here's my code: http://jsfiddle.net/mdrorum/HvFLw/
<script src="http://mrdoob.github.com/three.js/build/three.js"></script>
<script type="text/javascript">
var camera, scene, renderer;
var geometry, material, mesh;
var smooth, subdiv, modifier;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 1000;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
geometry = new THREE.SphereGeometry( 200 );
material = new THREE.MeshBasicMaterial( { color: 0x00ff00, wireframe: true } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
var smooth = mesh.clone();
var subdiv = 3;
var modifier = new THREE.SubdivisionModifier( subdiv );
//modifier.modify( smooth );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.02;
renderer.render( scene, camera );
}
</script>
This works fine, but uncomment: //modifier.modify( smooth );
Nothing happens. :(
How I can add subdivisions?
Here you can find a good tutorial with a working demo. Citing the author:
// First we want to clone our original geometry.
// Just in case we want to get the low poly version back.
var smooth = THREE.GeometryUtils.clone( geometry );
// Next, we need to merge vertices to clean up any unwanted vertex.
smooth.mergeVertices();
// Create a new instance of the modifier and pass the number of divisions.
var divisions = 3;
var modifier = new THREE.SubdivisionModifier(divisions);
// Apply the modifier to our cloned geometry.
modifier.modify( smooth );
// Finally, add our new detailed geometry to a mesh object and add it to our scene.
var mesh = new THREE.Mesh( smooth, new THREE.MeshPhongMaterial( { color: 0x222222 } ) );
scene.add( mesh );
You are trying to modify a mesh. You need to modify a geometry.
modifier.modify( geometry );