Implementing An Ocean Plane

Questions
1

Hey,

So sorry if this is quite a common question that is posted often… This is the last resort as I’ve been stuck for the last several days!

I have recently completed the discoverthree.js book - apart from the last section ‘loading external models’ as the instructions/example code for this chapter no longer works for me.

Anyway, I have a functional scene, a simple BoxBufferGemotry rotating with a texture wrapped around . See code below.

// these need to be accessed inside more than one function so we'll declare them first

var container;
var camera;
var scene;
var renderer;
var controls;
var mesh;

function init() {

container = document.querySelector( ‘#scene-container’ );

scene = new THREE.Scene();
scene.background = new THREE.Color( 0xefeff1 );

createCamera();
createLights();
createControls();
createMeshes();
createRenderer();

renderer.setAnimationLoop( () => {

update();
render();

} );

}

function createCamera() {

camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
camera.position.set( 5, 5, 5 );

}

function createControls() {

controls = new THREE.OrbitControls( camera, container );

}

function createLights() {

const ambientLight = new THREE.HemisphereLight(
0xddeeff, // sky color
0x202020, // ground color
5, // intensity
);

const mainLight = new THREE.DirectionalLight( 0xffffff, 5 );
mainLight.position.set( 10, 10, 10 );

scene.add( ambientLight, mainLight );

}

function createMeshes() {

const geometry = new THREE.BoxBufferGeometry( 2, 2, 2, 16);

const textureLoader = new THREE.TextureLoader();

const texture = textureLoader.load( ‘texture_0.png’ );

texture.encoding = THREE.sRGBEncoding;
texture.anisotropy = 16;

const material = new THREE.MeshStandardMaterial( {
map: texture, side: THREE.DoubleSide
} );

mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

}

function createRenderer() {

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );

renderer.gammaFactor = 2.2;
renderer.gammaOutput = true;

renderer.physicallyCorrectLights = true;

container.appendChild( renderer.domElement );

}

// perform any updates to the scene, called once per frame
// avoid heavy computation here
function update() {

mesh.rotation.z += 0.01;
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;

}

// render, or ‘draw a still image’, of the scene
function render() {

renderer.render( scene, camera );

}

// a function that will be called every time the window gets resized.
// It can get called a lot, so don’t put any heavy computation in here!
function onWindowResize() {

// set the aspect ratio to match the new browser window aspect ratio
camera.aspect = container.clientWidth / container.clientHeight;

// update the camera’s frustum
camera.updateProjectionMatrix();

// set the aspect ratio to match the new browser window aspect ratio
camera.aspect = container.clientWidth / container.clientHeight;

// update the camera’s frustum
camera.updateProjectionMatrix();

// update the size of the renderer AND the canvas
renderer.setSize( container.clientWidth, container.clientHeight );

}

window.addEventListener( ‘resize’, onWindowResize );

// call the init function to set everything up
init();

// then call the animate function to render the scene
animate();

I’m now looking to add this Ocean Plane from the three.js examples - three.js examples.

However, I can’t get my head around how to implement this. I’ve tried taking snippets from the example with no prevail and also simply copying and pasting the entire example, which doesn’t seem to work for me either haha.

If anyone could give me some general advice or point me to some resources that can help me develop from this stage, I would be deeply grateful.

Thanks!
Eliott

2

I am guessing that you have 2 problems:

1 - you don’t understand the fact that three.js as a library file only contains the “core” of three.js, almost every example pulls in additional dependencies. Unless you properly include those - your code will not work.

2 - java script modules. Both ES6 and node.js, if that’s the case - i suggest you read up on these. It will be worth it in the long run if you plan to write more JS in the future.

3

Hey Usnul,

Thanks for the reply and advice.

I understand that the example requires additional dependencies. I add these to my directory and run the scripts via index.html - So I don’t believe that’s the issue.

I’ll make sure to start reading up on ES6 and nose.js as I do plan to write more JS in the future. However, do you have any advice, in the short term, how I might add the Ocean Plane from the example to my existing project?

Thanks,
Eliott

4

My advice would be to try and reduce the problem surface. Make a working copy of the example, then make changes to that, once step at a time.

I suggest looking into the console output to track problems.

If you make a live example - myself or someone else here could take a look at it for you and give you more concrete pointers.

Also, look into versions. You might be using a version of three.js that doesn’t match the rest of the modules.

1 Like