Merge pull request #181 from ferrari212/master

Adding tutorials
shiplab · Jan 14, 2024 · 49641c2 · 49641c2
2 parents a1829be + 0a4ca63
commit 49641c2
Show file tree

Hide file tree

Showing 27 changed files with 2,449 additions and 42,622 deletions.
diff --git a/build/vessel.module.js b/build/vessel.module.js
diff --git a/build/vessel.module.min.js b/build/vessel.module.min.js
diff --git a/examples/3D_engine/Regular_ocean.js b/examples/3D_engine/Regular_ocean.js
@@ -113,10 +113,10 @@ export class DirectionalCosine extends Wave {
 
 export class Ocean extends THREE.Mesh {
 
- constructor( params ) {
+ constructor( params = {} ) {
 
- params = params || {};
  const size = params.size || 2048;
+ const path = params.path || "3D_engine/textures/waternormals.jpg";
  const segments = params.segments || 127;
  let waterGeometry = new THREE.PlaneBufferGeometry( size, size, segments, segments );
  let waterNormals, water;
@@ -127,7 +127,7 @@ export class Ocean extends THREE.Mesh {
  */
  try {
 
- waterNormals = new THREE.TextureLoader().load( "3D_engine/textures/waternormals.jpg", function ( texture ) {
+ waterNormals = new THREE.TextureLoader().load( path, function ( texture ) {
 
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
 
@@ -138,7 +138,7 @@ export class Ocean extends THREE.Mesh {
  textureHeight: 512,
  waterNormals: waterNormals,
  alpha: 1.0,
- sunDirection: params.sunDirection,
+ sunDirection: params.sunDir,
  sunColor: 0xffffff,
  waterColor: 0x001e0f,
  distortionScale: 50.0

diff --git a/...es/3D_engine/skybox_from_examples_r126.js → examples/3D_engine/skybox.js b/...es/3D_engine/skybox_from_examples_r126.js → examples/3D_engine/skybox.js
@@ -1,15 +1,15 @@
 import * as THREE from "./three_r126.js";
 
-export class Skybox extends THREE.Mesh {
+class Box extends THREE.Mesh {
 
- constructor( size ) {
+ constructor( size = 2048, path = "3D_engine/textures/skyboxsun25degtest1.png" ) {
 
  // load skybox (reusing example code to test the water shading fast)
  var cubeMap = new THREE.CubeTexture( [] );
  cubeMap.format = THREE.RGBFormat;
  var loader = new THREE.ImageLoader();
 
- loader.load( "3D_engine/textures/skyboxsun25degtest1.png", function ( image ) {
+ loader.load( path, function ( image ) {
 
  var getSide = function ( x, y ) {
 
@@ -59,10 +59,49 @@ export class Skybox extends THREE.Mesh {
 
  }
 
- // get envMap() {
+}
+
+class Sun extends THREE.DirectionalLight {
 
- // return this.material.uniforms.envMap.value;
+ constructor( size ) {
+
+ super( 0xffffff, 2 );
+ this.position.copy( this.getDefaultSunPosition( size ) );
+
+ }
+
+ getDefaultSunPosition( size ) {
+
+ const factor = size / 2048;
+ return new THREE.Vector3( - 512 / factor, 246 / factor, 128 / factor );
+
+ }
+
+}
 
- // }
+export class Skybox extends THREE.Group {
+
+ constructor( size, path ) {
+
+ super();
+ this.size = size;
+ this.box = new Box( size, path );
+ this.sun = new Sun( size );
+ this.add( this.box );
+ this.add( this.sun );
+
+ }
+
+ getMesh() {
+
+ return this.box;
+
+ }
+
+ getSun() {
+
+ return this.sun;
+
+ }
 
 }