ykob/sketch-threejs

Interactive sketches made with three.js.

Interactive sketches made with three.js.
https://ykob.github.io/sketch-threejs/

This code is released under the MIT license.
If you want to use some code, you can use these freely by adding license notation.

Also, I'm accepting donations through Paypal.
If you can support my project, please consider that.
https://www.paypal.me/ykob

Requirements

Node >=12.x <15

Usage

1. Install the necessary node modules.

npm i

2. Run the npm script start to start development.

npm run start

3. When finishing development, run the npm script build to make the compressed files.

npm run build

License

Copyright (c) 2021 Yoichi Kobayashi
Released under the MIT license
http://opensource.org/licenses/mit-license.php

Excluded files from the MIT License

• The texture that is using on the sketch "water".
• Textures these are using on the sketch "glass".
• 3D model that is using on the sketch "skull".
• 3D model and texture these are using on the sketch "crystal".
• 3D model that is using on the sketch "newyear2019".
• 3D model and texture these are using on the sketch "buddha".

Misc

Follow Yoichi Kobayashi: Web, Twitter

sketch-threejs's Issues

put site behind HTTPS

otherwise webcam demos wont work

Particles sketch not working on iPhone iOS 17

Hi Ykob, I'm currently facing a problem with your particle sketch, it doesn't work properly on iPhone with iOS 17, I tried to figure out what the problem is but all my attempts were unsuccessful.

The expected result:

Current result:

Distort sketch error

Hey :)

The distort sketch errors with:

    r https://ykob.github.io/sketch-threejs/js/main.min.js:2
    a https://ykob.github.io/sketch-threejs/js/main.min.js:2
    <anonymous> https://ykob.github.io/sketch-threejs/js/main.min.js:2
    <anonymous> https://ykob.github.io/sketch-threejs/js/main.min.js:2
    <anonymous> https://ykob.github.io/sketch-threejs/js/main.min.js:2```
de-minified line:  `main.min.js:2:19392`

Thought I would let you know as it seems that you updated the code recently.

Thanks for the great examples!

issues trying to build

hey i love to learn how you build all this but
when trying to run i got this:

ERROR in ./src/js/sketch/reel/Boxes.js
Module not found: Error: Can't resolve '../../common/Force3' in '/home/jacos/WEBs/sketch-threejs/src/js/sketch/reel'
 @ ./src/js/sketch/reel/Boxes.js 13:13-43
 @ ./src/js/sketch/reel/init.js
 @ ./src/js/main.js

ERROR in ./src/js/sketch/reel/Wire.js
Module not found: Error: Can't resolve '../../common/Force3' in '/home/jacos/WEBs/sketch-threejs/src/js/sketch/reel'
 @ ./src/js/sketch/reel/Wire.js 11:13-43
 @ ./src/js/sketch/reel/Boxes.js
 @ ./src/js/sketch/reel/init.js
 @ ./src/js/main.js

ERROR in ./src/js/smooth_scroll_manager/Hookes.js
Module not found: Error: Can't resolve '../common/Force3' in '/home/jacos/WEBs/sketch-threejs/src/js/smooth_scroll_manager'
 @ ./src/js/smooth_scroll_manager/Hookes.js 7:13-40
 @ ./src/js/smooth_scroll_manager/SmoothScrollManager.js
 @ ./src/js/index/init.js
 @ ./src/js/main.js

ERROR in ./src/js/common/ForcePerspectiveCamera.js
Module not found: Error: Can't resolve './Force3' in '/home/jacos/WEBs/sketch-threejs/src/js/common'
 @ ./src/js/common/ForcePerspectiveCamera.js 21:13-32
 @ ./src/js/sketch/instancing/init.js
 @ ./src/js/main.js

ERROR in ./src/js/sketch/dna/DnaHelix.js
Module not found: Error: Can't resolve './glsl/DnaHelix.fs' in '/home/jacos/WEBs/sketch-threejs/src/js/sketch/dna'
 @ ./src/js/sketch/dna/DnaHelix.js 90:22-51
 @ ./src/js/sketch/dna/init.js
 @ ./src/js/main.js

ERROR in ./src/js/sketch/dna/DnaHelix.js
Module not found: Error: Can't resolve './glsl/DnaHelix.vs' in '/home/jacos/WEBs/sketch-threejs/src/js/sketch/dna'
 @ ./src/js/sketch/dna/DnaHelix.js 89:20-49
 @ ./src/js/sketch/dna/init.js
 @ ./src/js/main.js

ERROR in ./src/js/sketch/crystal/PostEffectBloom.js
Module not found: Error: Can't resolve './glsl/PostEffectBloom.fs' in '/home/jacos/WEBs/sketch-threejs/src/js/sketch/crystal'
 @ ./src/js/sketch/crystal/PostEffectBloom.js 21:0-43 48:22-24
 @ ./src/js/sketch/crystal/WebGLContent.js
 @ ./src/js/sketch/crystal/init.js
 @ ./src/js/main.js

ERROR in ./src/js/sketch/crystal/PostEffectBlur.js
Module not found: Error: Can't resolve './glsl/PostEffectBlur.fs' in '/home/jacos/WEBs/sketch-threejs/src/js/sketch/crystal'
 @ ./src/js/sketch/crystal/PostEffectBlur.js 21:0-42 52:22-24
 @ ./src/js/sketch/crystal/WebGLContent.js
 @ ./src/js/sketch/crystal/init.js
 @ ./src/js/main.js

ERROR in ./src/js/sketch/crystal/PostEffectBright.js
Module not found: Error: Can't resolve './glsl/PostEffectBright.fs' in '/home/jacos/WEBs/sketch-threejs/src/js/sketch/crystal'
 @ ./src/js/sketch/crystal/PostEffectBright.js 21:0-44 48:22-24
 @ ./src/js/sketch/crystal/WebGLContent.js
 @ ./src/js/sketch/crystal/init.js
 @ ./src/js/main.js

can you point me how to fix this or what are the issues

Error on build when using node v9.11.2 (SyntaxError: Invalid regular expression /^.*?\((?<label>.*?)[,)]/: Invalid group from ow module)

This issue is for the record in case anyone encounters the same problem

npm install && npm run start =>

run start

> [email protected] start /path/to/code/sketch-threejs
> npm run dev


> [email protected] dev /path/to/sketch-threejs
> cross-env NODE_ENV=development gulp

SyntaxError: Invalid regular expression: /^.*?\((?<label>.*?)[,)]/: Invalid group
    at Object.<anonymous> (/path/to/node_modules/ow/dist/source/index.js:1:26679)
    at r /path/to/sketch-threejs/node_modules/ow/dist/source/index.js:1:186)
    at Object.module.exports.r /path/to/sketch-threejs/node_modules/ow/dist/source/index.js:1:11962)
    at r (/path/to/sketch-threejs/node_modules/ow/dist/source/index.js:1:186)
    at module.exports.Object.defineProperty.value (/path/to/sketch-threejs/node_modules/ow/dist/source/index.js:1:985)
    at Object.<anonymous> (/path/to/sketch-threejs/node_modules/ow/dist/source/index.js:1:994)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)

builds fine on node v10.15.3

How to use sketch-threejs, Did you have any documents?

Hello, I'm find sketch-three.js is very interesting. I want to try use it. Could you give me some detail documents or example？

In which IDE program do you make your projects?

IntelliJ IDEA ?
NetBeans ?

The build for this has lots of errors and no longer works

I'd love to try it out locally.

Would you mind updating the build and the libraries please?

Make background transparent

I am using this library https://ykob.github.io/sketch-threejs/sketch/butterfly.html I want to add a background image so that butterflies fly on that background but when i add background image to canvas, it appears for once and then it disappear.
Any way to make background of butterflies transparent so that background image appears?

Is not runing on Server

Hi, I wanted to run this awesome project on a custom-httpd-server for testing purposes. But for whatever reason I can't display for example "cyberspace" exactly as it is displayed on the original publisher's website.

Can someone possibly help me with this please?

gallery - thoughts

It should have options to scroll via mouseweel, as reel does