थ्रीज कैनवास पृष्ठभूमि काला

मैंने तीनj के मूल दृश्य के साथ एक परीक्षण किया लेकिन मुझे समझ में नहीं आया कि कैनवास पृष्ठभूमि पूरी तरह से काला क्यों है।थ्रीज कैनवास पृष्ठभूमि काला

<html> 
<head> 
    <title>My first Three.js app</title> 
    <style> 
     body { margin: 0; } 
     canvas { width: 100%; height: 100%;background-color: white; } 
    </style> 
</head> 
<body> 
    <script src="Stereos/threejs/three.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 
    </script> 
    </body> 
</html>

संपादित करें:

कोड felpone.netsons.org

स्रोत

2015-04-02 Stefano Maglione

कैनवास की पृष्ठभूमि का रंग सीएसएस मूल्य से निर्धारित नहीं है, लेकिन का उपयोग कर renderer.setClearColor (0xff0000, 1);

स्रोत

2015-04-02 20:51:07 gaitat

यह बिल्कुल सही नहीं है। 'Renderer = new THREE.WebGLRenderer ({अल्फा: सच}) का उपयोग करें; renderer.setClearColor (0x000000, 0); 'और सीएसएस पृष्ठभूमि रंग के माध्यम से दिखाया जाएगा। – WestLangley

@WestLangley वास्तव में भ्रम (और मेरा भी) इस तथ्य से आता है कि कैनवास पृष्ठभूमि रंग अलग-अलग व्यवहार करता है जहां यह परिभाषित किया जाता है; कैनवास तत्व पर सीधे एक सीएसएस शैली (http://jsfiddle.net/dzdoLosm/) या स्वयं द्वारा एक सीएसएस तत्व के रूप में (http://jsfiddle.net/n0jdpr76/) जहां 'setClearColor (रंग, 0) सेट करना काम नहीं लग रहा है। – gaitat

आपके स्पष्ट रंग में शून्य अल्फा है। 'Renderer.setClearColor (0xff0000, 0.5) का प्रयास करें;' – WestLangley

पर आप बना एक दृश्य, एक कैमरा बनाया और एक रेंडरर बनाया, लेकिन आप दो महत्वपूर्ण चीजें खो रहे हैं: प्रस्तुत करने के लिए कुछ जोड़ना, और वास्तव में इसे प्रस्तुत करना।

अपने अंतिम पंक्ति के बाद, जोड़ने

var cube = new THREE.Mesh( 
    new THREE.CubeGeometry(1,1,1), 
    new THREE.MeshNormalMaterial() 
); 
scene.add(cube); 

camera.position.set(2,2,2); 
camera.lookAt(cube.position); 

renderer.render(scene, camera);

कि आकार 1 यूनिट के साथ, मूल (0,0,0) पर एक घन पैदा करेगा; कैमरे को थोड़ा दूर रखें और घन पर इंगित करें; और उसके बाद क्यूब प्रस्तुत करने के लिए रेंडरर को कॉल करें।

स्रोत

2015-07-23 10:12:02

आप सीएसएस का उपयोग कर पृष्ठभूमि रंग को नियंत्रित कर सकते हैं, लेकिन आपको पहले अपने वेबग्लेंडरर के "अल्फा" को "सत्य" पर सेट करना होगा।

उदाहरण में, मैंने अल्फा विकल्प जोड़ा और प्रस्तुतकर्ता में सत्य पर सेट किया, और मैंने शरीर शैली में पृष्ठभूमि-रंग की संपत्ति भी जोड़ा।

<html> 
    <head> 
     <title>My first Three.js app</title> 
     <style> 
      body { margin: 0; background-color: white; } 
      canvas { width: 100%; height: 100%; background-color: white; } 
     </style> 
    </head> 
    <body> 
    <script src="Stereos/threejs/three.js"></script> 
    <script> 
     var scene = new THREE.Scene(); 
     var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

     var renderer = new THREE.WebGLRenderer({alpha: true}); 
     renderer.setSize(window.innerWidth, window.innerHeight); 
     document.body.appendChild(renderer.domElement); 
    </script> 
    </body> 
</html>

स्रोत

2015-07-29 17:11:09 asherkhb

@ जैम संचेज़ सही उत्तर है। यद्यपि अन्य उत्तर तथ्यात्मक हैं, लेकिन मुझे नहीं लगता कि वे तीनों जेएस के लिए एक व्यक्ति के रूप में पूछने के लिए कहां जवाब देते हैं। var renderer सिर्फ आपके प्रस्तुत लक्ष्य का संदर्भ है। आपका कोड कुछ नहीं खींचता है। आपके पास कुछ भी देखने के लिए आपके दृश्य में कैमरा नहीं है। https://threejs.org/docs/index.html#Manual/Getting_Started/Creating_a_scene शुरू करने के लिए एक ट्यूटोरियल

स्रोत

2017-01-26 15:01:17 Dcoollx

थ्रीज कैनवास पृष्ठभूमि काला

उत्तर

संबंधित मुद्दे