<html lang="en">
<head>
<title>Three.js </title>
<meta charset="utf-8">
<script src="resources/three.min.js"></script>
<script src="resources/stats.min.js"></script>
<script src="resources/Detector.js"></script>
<script id="vshader" type="x-shader/x-vertex" >
#ifdef GL_ES
precision highp float;
#endif
uniform mat4 worldviewproj;
attribute vec4 vPosition;
attribute vec4 vNormal;
attribute vec2 vTexCoord1;
varying vec2 v_texCoord;
void main() {
gl_Position = worldviewproj * vPosition;
v_texCoord = vTexCoord1.st;
}
</script>
<script id="fshader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform sampler2D uSampler;
varying vec2 v_texCoord;
varying vec3 vLightWeighting;
void main() {
vec4 textureColor = texture2D(uSampler, vec2(v_texCoord.s, v_texCoord.t));
gl_FragColor = textureColor;
}
</script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var scale = 100, N=1000;
var arr= [];
var width = 720, height = 405;
var uniforms, material;
start =function()
{
init();
animate();
};
function init()
{
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 10000 );
camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 80;
//camera.lookAt( new THREE.Vector3( scale/2, scale/2, scale/2 ) );
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setClearColor(new THREE.Color(0x000000));
renderer.setSize( width, height );
container.appendChild( renderer.domElement );
uniforms = {
uSampler: { type: "t", value: THREE.ImageUtils.loadTexture( "resources/crate.jpg" ) }
};
var geometry = new THREE.CubeGeometry( 1, 1, 1 );
//material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("resources/crate.jpg")} );
material = new THREE.ShaderMaterial( {
uniforms: uniforms,
vertexShader: document.getElementById( 'vshader' ).innerHTML,
fragmentShader: document.getElementById( 'fshader' ).innerHTML
} );
for ( var i = 0; i <= N; i++)
{
arr.push(new THREE.Mesh( geometry, material ));
arr[i].position.set( (Math.random()-0.5) * scale, (Math.random()-0.5) * scale, (Math.random()-0.5) * scale );
scene.add( arr[i] );
}
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.bottom = '1px';
container.appendChild( stats.domElement );
document.getElementById('3dobjects').innerHTML = "The number of Cube Objects: " +N;
}
function animate()
{
requestAnimationFrame( animate );
render();
stats.update();
}
function render()
{
renderer.render( scene, camera );
}
</script>
</head>
<body onload="start()">
<label id="3dobjects">test</label>
</body>
</html>
Prior to custom shader program, I used default THREE.MeshBasicMaterial ({Texture Source}), I’ve my output. but after I used this custom shader program, I couldn’t get my result. I don’t know where exactly my problem persists in the above code. I have been kept trying all sorts of ways, i could. But No desired result. Any Idea or Help please..
You are using
THREE.CanvasRenderer, which does not support custom shaders, among other things. TryTHREE.WebGLRenderer.In addition, you are not setting the
worldviewprojuniform, nor those attributes, which don’t use standard Three.js names.