yanipra Posted January 17, 2014 Share Posted January 17, 2014 Hi, All i'm newbie I have question about code<html><head> <title>FIRST THREE.JS TUTORIAL</title> <script id="vertexShader" type="x-shader/x-vertex"> uniform sampler2D baseTexture; varying vec2 vUv; void main() { vUv = uv; vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); gl_Position = projectionMatrix * mvPosition; } </script> <script id="fragmentShader" type="x-shader/x-vertex"> uniform sampler2D baseTexture; uniform float alpha; varying vec2 vUv; void main() { vec4 grass = texture2D( baseTexture, vUv ); grass.a = alpha; gl_FragColor = grass; } </script></head><body> <div id="treejs" style="position: absolute; left:0px; top:0px"></div> <script type="text/javascript" src="js/three2.js"></script> <script src="js/loaders/ColladaLoader.js"></script> <script src="js/OrbitControls.js"></script> <script src="js/libs/stats.min.js"></script> <script type="text/javascript"> var container; var scene, camera, renderer, stats, controls, sceneCube; var geometry, material; var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight; var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH/SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; var clock = new THREE.Clock(); //-- variable uniforms //var customUniforms; init(); animate(); function init() { container = document.getElementById('treejs'); document.body.appendChild(container); scene = new THREE.Scene(); //-- camera camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR); camera.position.set(0,100,400); camera.lookAt(scene.position); scene.add(camera); //-- light var light = new THREE.PointLight(0xffffff); light.position.set(0,250,0); light.lookAt(scene.position); scene.add(light); //-- axes var axes = new THREE.AxisHelper(1000); scene.add(axes); //-- grid var grid = new THREE.GridHelper(500,500); scene.add(grid); // Skybox sceneCube = new THREE.Scene(); var path = "resource/Cloudy-Sky/"; var format = '.jpg'; //-- bt buttom, ft front, up top, var urls = [ path + 'px' + format, //benar salah path + 'nx' + format, // benar path + 'py' + format, // path + 'ny' + format, //bawah benar path + 'pz' + format, //benar benar path + 'nz' + format // benar ]; var textureCube = THREE.ImageUtils.loadTextureCube( urls, new THREE.CubeRefractionMapping() ); var shader = THREE.ShaderLib[ "cube" ]; shader.uniforms[ "tCube" ].value = textureCube; var material = new THREE.ShaderMaterial( { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: shader.uniforms ,depthWrite: false, side: THREE.BackSide } ), meshSkybox = new THREE.Mesh( new THREE.CubeGeometry( 10000, 10000, 10000,1 ,1 ,1, null, true ), material ); scene.add( meshSkybox ); var jsonLoader = new THREE.JSONLoader(); var modelTexture = jsonLoader.load( "resource/heightmap/IceAge.js", addModelToScene ); stats = new Stats(); stats.domElement.style.position = 'absolute'; stats.domElement.style.bottom = '0px'; stats.domElement.style.zIndex = 100; container.appendChild(stats.domElement); renderer = new THREE.WebGLRenderer(); renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT); container.appendChild( renderer.domElement ); // CONTROLS controls = new THREE.OrbitControls( camera, renderer.domElement ); } //-- model function function addModelToScene(geometry, material) { var texture1 = new THREE.ImageUtils.loadTexture("resource/images/grass-512.jpg"); texture1.wrapS = texture1.wrapT = THREE.RepeatWrapping; this.customUniforms = { baseTexture : { type:"t", value: texture1}, alpha : { type:"f", value: 1.0} }; //this.customUniforms.texture.value.wrapS = this.customUniforms.texture.value.wrapT = THREE.RepeatWrapping; this.shMaterial = new THREE.ShaderMaterial ( { uniform: customUniforms, fragmentShader : document.getElementById('fragmentShader').textContent, vertexShader : document.getElementById('vertexShader').textContent, //side: THREE.DoubleSide } ); terrain = new THREE.Mesh(geometry, shMaterial); terrain.scale.set(128,128,128); scene.add(terrain); } function animate() { requestAnimationFrame(animate); render(); update(); } function update() { var delta = clock.getDelta(); time = clock.getElapsedTime() * 1000; stats.update(); controls.update(delta); } function render() { renderer.render(scene, camera); } </script></body></html>I have question i can't my texture on my object (black object) the result is: Please Help me, thank Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.