Skip to content

Instantly share code, notes, and snippets.

View izumiikezaki's full-sized avatar

ikezaki izumiikezaki

  • Japan
  • 00:09 (UTC +09:00)
View GitHub Profile
@izumiikezaki
izumiikezaki / GLTFTest.js 1
Last active December 17, 2018 23:25
GLTFTest.js
var loader = new THREE.GLTFLoader();
loader.load(
'models/sakana/sakana.gltf',
function ( gltf ) {
console.log(gltf.scene);
scene.add(gltf.scene);
},
const divNum = 12;//波の分割数
const waveNum = 1;//波の数
function planeAnim(){
for (var i = 0; i < planeGeo.vertices.length; i++) {
if(Math.floor(i/(divNum+1))==1){//列ごとに処理
planeGeo.vertices[i].y=Math.sin((clock.getElapsedTime()+(i/6))*2)*10;
}else{
planeGeo.vertices[i].y=Math.sin((clock.getElapsedTime()+(i/6))*2)*20;
const divNum = 12;//波の分割数
const waveNum = 1;//波の数
//ベジェ曲線の制御点の座標
var p1 = new THREE.Vector3();
var p2 = new THREE.Vector3();
var s1 = new THREE.Vector3();
var s2 = new THREE.Vector3();
function bezer(p1,p2,s1,s2,t){//三次ベジェ曲線の座標を返す
var simplex = new SimplexNoise();
const divNum = 50;//波の分割数
const waveNum = 5;//波の数(波の数-1)
function planeAnim(){
//var simplex = new SimplexNoise();
for (var i = 0; i < planeGeo.vertices.length; i++) {
var divNumIndex = i % divNum;//波の節のインデックス(左から0番~[divNum]番)
var waveNumIndex = Math.floor(i/(divNum+1)) ;//波の数のインデックス(0番~[waveNum]番)
<script type="x-shader/x-vertex" id="vshader">
varying vec3 vNormal;
varying vec3 pos;
void main()
{
vNormal=normalMatrix * normal;
pos = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type="x-shader/x-vertex" id="vshader">
varying vec3 vNormal;
varying vec3 pos;
void main()
{
vNormal=normalMatrix * normal;
pos = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
<script type="x-shader/x-vertex" id="vshader">
varying vec3 vNormal;
varying vec3 pos;
void main()
{
vNormal=normalMatrix*normal;
pos = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>
@izumiikezaki
izumiikezaki / Threejs_template.html
Last active October 2, 2023 00:57
NEORTでのthree.js作品制作のための自分用テンプレート
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.min.js" ></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--ここにシェーダとか書く-->
<nav id="header-nav">
<ul>
<li><a href="https://izumiikezaki.hatenablog.com/archive/category/3DCG">
<i class="fas fa-cube"></i>
<span class="nav-text">3DCG</span></a></li>
<li><a href="https://izumiikezaki.hatenablog.com/archive/category/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0">
<i class="fas fa-keyboard"></i>
<span class="nav-text">プログラミング</span></a></li>
<li><a href="https://izumiikezaki.hatenablog.com/archive/category/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3">
<i class="fas fa-pencil-ruler"></i>
/*カテゴリの色変更*/
a.category-3DCG{
background-color:#002030;
color:white;
}
a.category-プログラミング{
background-color:#002030;
color:white;
}
a.category-デザイン{