তিনটি জেএস ব্যাকগ্রাউন্ডকে স্বচ্ছ বা অন্য রঙে পরিবর্তন করা হচ্ছে

Question

আমি আমার ক্যানভাসের ডিফল্ট ব্যাকগ্রাউন্ড রঙটি কালো থেকে স্বচ্ছ / অন্য কোনও রঙে রূপান্তর করার চেষ্টা করছি - তবে ভাগ্য নেই।

আমার এইচটিএমএল:

<canvas id="canvasColor">

আমার সিএসএস:

<style type="text/css">
#canvasColor {
 z-index: 998;
opacity:1;
background: red;
}
</style>

আপনি যেমন নীচের অনলাইন উদাহরণে দেখতে পাচ্ছেন আমার কিছু অ্যানিমেশন ক্যানভাসে যুক্ত হয়েছে, সুতরাং ক্যান্টটি কেবল একটি অস্বচ্ছতা করতে পারে: 0; আইডিতে

লাইভ পূর্বরূপ: http://devsgs.com/preview/test/particle/

কোনও ধারণা কীভাবে ডিফল্ট কালোটিকে ওভাররাইট করবেন?

Comments

শুরুতে function init() {, আপনার ক্যানভাসটি লাল! থ্রি.জেএস এর সাথে এটি কালোতে পরিবর্তন করে setClearColorHex!

— সাইমন সরিস

Answer 1

আমি থ্রি.জেএসও ব্যবহার শুরু করলে আমি এটি পেরিয়ে এসেছি। এটি আসলে একটি জাভাস্ক্রিপ্ট সমস্যা। আপনার বর্তমানে রয়েছে:

renderer.setClearColorHex( 0x000000, 1 );

আপনার threejsinit ফাংশনে। এটিকে পরিবর্তন করুন:

renderer.setClearColorHex( 0xffffff, 1 );

আপডেট: আপডেট সমাধানের জন্য এইচডিএন 8 কে ধন্যবাদ:

renderer.setClearColor( 0xffffff, 0);

আপডেট # 2: ওয়েস্টল্যাংলে অন্য একটিতে যেমন উল্লেখ করা হয়েছে , অনুরূপ প্রশ্ন - setClearColor()ফাংশনের সাথে একত্রে একটি নতুন ওয়েবজিএলরেন্ডার উদাহরণ তৈরি করার সময় আপনাকে অবশ্যই এখন নীচের কোডটি ব্যবহার করতে হবে :

var renderer = new THREE.WebGLRenderer({ alpha: true });

আপডেট # 3: মিঃডুব যেটির পরে তা উল্লেখ করেছেনr78 আপনি বিকল্পভাবে আপনার দৃশ্যের পটভূমির রঙ সেট করতে নীচের কোডটি ব্যবহার করতে পারেন:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Comments

আপনি সত্যিই সঠিক। ক্যানভাস সত্যিই স্বচ্ছ জনসংযোগ। ডিফল্ট, আমার জন্য তাই লজ্জা। এটি কোথায় পরিবর্তন করবেন তা নির্দেশ করার জন্য অনেক ধন্যবাদ - এটি এখন দুর্দান্ত দেখাচ্ছে!

— ব্যবহারকারী 1231561

ভাল লাগছে, এটি আমাকেও কিছুটা বাড়িয়ে দিয়েছে। আমি তিনটি জেএসের স্ক্রিপ্টে দেখতে পেলাম যে এই পদ্ধতিটি শীঘ্রই হ্রাস করা হয়েছে, পরিবর্তে সেটকলার কলার (0xffffff, 1) ব্যবহার করুন।

— এইচডিএন

@ এইচডিএন 8 - আপডেটের জন্য ধন্যবাদ, আমি এটি উত্তরে যুক্ত করেছি।

— জো

সেটক্লেয়ার কালার (0xffffff, 1) আমার পক্ষে কাজ করে নি (এটি সাদা করে দিয়েছিল) তবে সেট ক্লেয়ার কালার (0xffffff, 0) কাজ করেছে (স্বচ্ছ করেছে)

— রোনেন রাবিনোভিচি

যেহেতু r78আপনি সহজেই করতে পারেনscene.background = new THREE.Color( 0xff0000 );

— mrdoob

Answer 2

একটি সম্পূর্ণ উত্তর: (r71 দিয়ে পরীক্ষিত)

একটি পটভূমি রঙ সেট করতে:

renderer.setClearColor( 0xffffff ); // white background - replace ffffff with any hex color

আপনি যদি স্বচ্ছ পটভূমি চান তবে আপনাকে প্রথমে আপনার রেন্ডারারে আলফা সক্ষম করতে হবে:

renderer = new THREE.WebGLRenderer( { alpha: true } ); // init like this
renderer.setClearColor( 0xffffff, 0 ); // second param is opacity, 0 => transparent

আরও তথ্যের জন্য ডক্স দেখুন ।

Answer 3

স্বচ্ছতার জন্য, এটিও বাধ্যতামূলক: থ্রি.জেএস সহ স্বচ্ছ পটভূমিরrenderer = new THREE.WebGLRenderer( { alpha: true } ) মাধ্যমে

Answer 4

আমি দেখতে পেলাম যে আমি যখন থ্রি.জেএস সম্পাদকের মাধ্যমে একটি দৃশ্য তৈরি করেছি তখন আমাকে কেবলমাত্র সঠিক উত্তরের কোডটি (উপরে) ব্যবহার করতে হবে না, একটি আলফা মান এবং পরিষ্কার রঙ সহ রেন্ডারার সেট আপ করতে আমাকে অ্যাপে যেতে হয়েছিল .জসন ফাইল এবং "দৃশ্য" অবজেক্টের "পটভূমি" বৈশিষ্ট্যটি সন্ধান করুন এবং এটিতে সেট করুন: "background: null" ।

থ্রি.জেএস সম্পাদকের রফতানিটি মূলত এটি "ব্যাকগ্রাউন্ড": 0 এ সেট করেছে

Answer 5

2020 সালে r115 ব্যবহার করে এটি এর সাথে খুব ভাল কাজ করে:

const renderer = new THREE.WebGLRenderer({ alpha: true }); const scene = new THREE.Scene(); scene.background = null;

Answer 6

আমি আরও যোগ করতে চাই যে থ্রি.জেএস সম্পাদক ব্যবহার করে যদি সূচিপত্রের html তেও পটভূমির রঙ নির্ধারণ করতে ভুলবেন না।

background-color:#00000000