I'm attempting to construct a model of a rocket ship by adding various shapes to a large group and positioning them along specific axes.
However, when I try to use
rocketConeMesh.position.y = 15;
The shape doesn't move at all. My goal is to place the rocketCone (the nose of the rocket ship) on top of the rocketBody and have them both belong to the same group.
Upon running this code, I encounter the following error message:
"THREE.Object3D.add: object not an instance of THREE.Object3D."
This error pertains to the coneGeometry object in my code.
My current code setup is displayed below:
<script type="text/javascript">
// Setting up the scene to contain all elements such as objects, cameras, and lights.
var scene = new THREE.Scene();
// Defining the camera's perspective parameters.
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// Creating a renderer and setting its size.
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', function()
{
var width = window.innerWidth;
var height = window.innerHeight;
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
} );
controls = new THREE.OrbitControls(camera, renderer.domElement);
// Generating an object group to hold sub-shapes.
var rocketGroup = new THREE.Object3D();
scene.add(rocketGroup);
// Representing the top cone of the rocket.
var rocketCone = new THREE.ConeGeometry(6, 10, 6);
var material = new THREE.MeshBasicMaterial({color: 0xcccccc, wireframe: true});
var cone = new THREE.Mesh(rocketCone, material);
rocketConeMesh = new THREE.Mesh(rocketCone,new THREE.MeshPhongMaterial())
scene.add(cone);
// Specifying the position of the rocket cone.
rocketConeMesh.position.y = 15;
// Adding the rocketCone to the lowpolyRocket group.
rocketGroup.add(rocketCone);
/******************************************************************************************************************/
//var rocketBody = new THREE.CylinderGeometry(5, 5, 20, 32);
//var material = new THREE.MeshBasicMaterial({color: 0xcccccc, wireframe:false});
//var cylinder = new THREE.Mesh(rocketBody, material);
//scene.add(cylinder);
// Positioning and orienting the camera towards the center of the scene.
camera.position.x = -30;
camera.position.y = 20;
camera.position.z = 30;
camera.lookAt(scene.position);
// Game logic
var update = function ()
{
//cone.rotation.x += 0.01;
//cone.rotation.y += 0.005;
};
// Rendering the scene
var render = function ()
{
renderer.render(scene, camera);
};
// Running the game loop (update, render, repeat)
var GameLoop = function ()
{
requestAnimationFrame(GameLoop);
update();
render();
};
GameLoop();
</script>